i am making a wordpress news site. I use the new wp menu 3.0 where every menu item links to a template page. On those pages i display posts from custom loops. for instance lets say i have the page breaking news that displays the posts from the breaking news category. When i click on that link it takes me to the breaking news page and from there when i view single post from that category i want the page breaking news to be highlighted.
I have searched and found that wordpress assings ancestor classes to the links but thats not the case for me since i think that only works with categories as the navigation and im using pages.
Can anyone help me?
Thanks :)
are you using firebug or the inspectors built into chrome and safari. with those you can directly see what classes are available for you to style. maybe you already know that. If there are no classes to style there are hooks you can use to add a class. can you provide a url to your site?
Try the following in header.php...
<?php
/**
* Do this to #access in header.php
*/
?>
<nav id="access" role="navigation" class="<?php
if(in_category('cat-1')) echo 'post-in-cat-1 ';
if(in_category('cat-2')) echo 'post-in-cat-2 ';
if(in_category('cat-3')) echo 'post-in-cat-3 ';
?>">
Then in your stylesheet add this:
/**
* look for the menu-item-# generated by the menu in your theme and use that.
*/
.post-in-cat-1 .menu-item-1234,
.post-in-cat-2 .menu-item-1235,
.post-in-cat-3 .menu-item-1236
{
color:#FFF; // or whatever color you want :)
}
That's just my first thought, totally untested, so let me know if it works at all. I'm guessing that it will work based on this.
It's not as dynamic as real category pages since you have to set up the categories yourself and add the menu-item numbers to your CSS as needed. So there might be a more clever solution. But, without testing it myself, this is what I would try.
1. In css file of ur website,include this line where
- nav is the id of <nav> tag,where i have mentioned my menus in header.php
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
#nav li.current_page_item a {
-moz-border-radius: 3px 3px 3px 3px;
background-color: #82BD42;
color: #FFFFFF !important;
padding: 10px;
text-decoration: none;
}
2. We can change background-color,color and padding to our choose.
Related
I've run into a small problem coding my own WP theme from scratch (with a static Home page and a separate Blog page). I can't change the font-color of my blog posts (that display after I click them). So I have a two-part question:
Why can't I get the_content to change color on my single.php page? Here's my code:
<?php
get_header();
the_post();
if ( has_post_thumbnail() ) {
the_post_thumbnail('large');
}
?>
<div class="white">
<div class="container">
<h2 class="black-text light" style="margin:0;">
<?php the_title();?>
</h2>
<h5 class="black-text" style="margin:0 0 7% 0;">
<?php the_author();?>
</h5>
<p class="black-text">
<?php the_content();?>
</p>
</div>
</div>
<?php
get_footer();
?>
What's happening is on my single.php page (which I'm using to design my individual blog posts), I've put 'the_title();' in an <h2>, 'the_author();' in an <h5>, and 'the_content();' in a <p>. I've also told each of those elements to show as black text. However, only the <h2> and <h5> change to black text. When I inspect it with Dev Tools, what's happening is WP is ignoring my hard-coded <p>, and creating new <p> of its own WITHOUT the black-font formatting.
My second question:
Am I even doing this right?? It displays fine on my local development, but am I doing this all in the correct way? Basically, I have a front-page.php that displays my Home Page. Then I have an index.php that shows the main blog page with small excerpts. Then, when a user clicks on a single blog post to open it, the individual post is shown with the single.php template. Is this right?
If a reference would help, you can see it here: www.uptowndownentertainment.com/blog
The code is missing from your post, you need to indent it with four spaces to make it show up. Looking at this page you seem to have added this before the content:
<p class="black-text" style="color:black !important;">
But the actual text is inside another paragraph element so it's not affected by that code. Wordpress automatically does this when writing posts. The easiest solution might be to add this to your style.css:
.container p {
color: black;
}
And then remove the style markup from the headers and paragraphs. It's always better to keep styles in the CSS instead of right in the code.
I am using woocommerce on my website ,
The problem is : Both woocommerce pages ( Shop & My Account ) Use same css clas <div class="main col-lg-9 col-md-8" role="main">
When i change the width of my account page, Same happens with the shop page?
i spent Hours on firebug but couldnt figure out
My Website : http://cardmart.tk
Thanks
You can use a parent element class to distinguish between those two pages.
Eg.
body.page-id-749 .main .col-lg-9 .col-md-8{ }
and
body.post-type-archive-product .main .col-lg-9 .col-md-8{ }
Let me know if that helps.
I have a wordpress theme I'm adapting to a clients needs, but I can't make the sidebar ads, which are 125x125px, show a same sized swf instead of a image. If I insert a swf link, it show a broken image thumbnail.
Please help me achieve this.
If it helps you, the url of the website is http://infodrum.ro/inde2.php/
PHP code
<?php if(get_theme_option('ads_125') != '') {
?>
<div class="sidebaradbox">
<?php sidebar_ads_125(); ?>
</div>
<?php } ?>
CSS
.ad125 {
margin: 10px;
height: 125px;
width: 125px;
}
You're usually inserting a path to an image in The backend, right? Like "http://somedomain.com/image.jpg"
Most likely, The Code Inside The Plugin then Produces something like
<img src="WHATEVER YOU ENTERED" />
Since an SWF is Not a valid image, everything ends up being terrible.
I suggest you try The normal WP Text Widget instead!
I am trying to modify sub-menus of a Wordpress site. Wordpress generates the following HTML code for the sub-menus
<ul class="sub-menu" style="top: 50px; visibility: visible; left: 0px; width: 202px; display: none;">
<li class="menuitem123 menu-item menu-item-type-post_type menu-item-object-page menu-item-123" id="menu-item-123">Link Name</li>
<!-- other li elements follow -->
</ul>
Here's my invocation of the wp_nav_menu
<?php if(has_nav_menu('secondary')):?>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_container' => 'div', 'container_id' => 'secondary-menu','menu_class' => '', 'theme_location' => 'secondary'));?>
<?php endif;?>
The problem is, I want to customize the inline style (or preferably move it out into a css file) that Wordpress is generating for the ul element, mainly the width. I have searched high and low but cannot find from where Wordpress is picking up the inline style and inserting it. I need to get rid of the inline style because I need to set different width for other sub-menus.
I could adapt the answer given on this wp_nav_menu change sub-menu class name? link which suggests sub classing the Wordpress Walker class.
Please can someone provide some pointers on what else should I be checking to see from where Wordpress is picking up the inline style?
Many thanks.
WordPress itself does not generate any inline styles, so most probably the deal is in your plugins or theme installed. According to your code, you do not use customized walkers, so the only deal may be in filters attached to standard Walker_Nav_Menu (see nav-menu-template.php file, at the beginning). Corresponding filters are most probably: nav_menu_css_class, nav_menu_item_id, walker_nav_menu_start_el.
Hey I have a wordpress blog, and I need to add some negative margin on the sidebar on the index page, but not on any other page, the trouble is since the sidebar is in "sidebar.php" and the head element is in "header.php" so I can't use inline styles or styles just for that page.
Any ways of achieving this?
I would assume a PHP if statement in the header?
For the moment I've used a style element within the body.
I haven't used wordpress in some time, but from what I remember, there was a specific home/index template... You could wrap the sidebar in a tag and sub-reference that through css.
css:
#sidebar-fix #sidebar element {...}
html:
<div id="sidebar-fix"><?#sidebar include?></div>
You can use the is_page function to single out the page you want. Here is an example and a link.
<?php if (is_page('My Page')) { ?>
<style type="text/css">Your style here</style>
<?php } ?>
http://codex.wordpress.org/Function_Reference/is_page