I am building a site on the WordPress Twenty Ten theme. I would like to style the navigation bar so the tabs are spread out across the top but am at a bit of a loss.
Here is the navbar: http://screencast.com/t/AbIPglmGtQ
Here is the CSS: http://pastebin.com/pSnCGcrQ
Also, would anyone have a clue as to adding segmentation between the tabs ie" Home | About | Services?
Any help would be much appreciated. Would love to put a fork in this project before the holidays!
Alex
First of all, you'll probably want to create a Child Theme, because otherwise when TwentyTen is updated, you'll lose all of your customizations. As far as spacing them out - it depends... do you want them to be spaced without expanding the current width of each link, or do you want to expand each link's width also? Kind of confusing, but you can expand it by increasing the margin to something like:
margin: 0 15px;
But, that'll just spread them out more - the size of the links will stay the same. To change the size of the links, adjust the padding as well. I'd do a little combination of both.
For the separator, in header.php, appx line 85, you'll see something like:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
change that to:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'after' => '|', 'theme_location' => 'primary' ) ); ?>
That should add a | after each link on there. Hope that helps. Let us know!
Related
I've a WP site with the Enfold-child theme. For the header, I choose to place the company logo upper left and main menu under the company logo. I would like to add an image on the right of the company logo but I don't try to do this.
Last part of header.php is the following
<?php
if(!$blank) //blank templates dont display header nor footer
{
//fetch the template file that holds the main menu, located in includes/helper-menu-main.php
get_template_part( 'includes/helper', 'main-menu' );
} ?>
<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting('header_scroll_offset'); ?>'>
<?php
if(isset($avia_config['temp_logo_container'])) echo $avia_config['temp_logo_container'];
do_action('ava_after_main_container');
?>
Have I to modify this file to add the image? Can you help me, please?
Thanks!
try this. It's a Knowledgebase article from Enfold detailing how to add a Widget area to the header for adding custom code, ie an image.
It's what we use to do exactly that.
: http://www.kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
if you do not want to touch the header.php you may consider using a css ::after selector
I don't know if I asked that right. Let me try to explain a little more. First, I have WordPress installed on my site, if that means anything. Using a frontend image uploader, I want to be able to upload one image and, upon submitting, the output would be three images:
original photo (less than 130px in width and height)
original photo but rotated at 35 degrees counterclockwise
original photo but rotated at 45 degrees counterclockwise
I would like these three image outputs automatically called into three designated areas on the page. For example:
Gold Photo Frame #1 (top)
Blue Photo Frame #2 (middle)
Red Photo Frame #3 (bottom)
Ugh... here... I made an image to illustrate what I am hoping and needing to achieve:
Is this possible? If so will someone please tell me on how to do this or where a tutorial is on how to do this? What is this process called so I can effectively find the solution or method to doing this? Or is there already a plugin or script that is out there that will let me do this? Thanks!
in your functions.php use the add_image_size function
add_theme_support( 'post-thumbnails' );
add_image_size( 'upload', 130, 130, true );
then in your theme (front-end)
<?php if ( has_post_thumbnail() ) {?>
<div class="gold-frame uploaded-pic"><?php the_post_thumbnail('upload'); ?></div>
<div class="blue-frame uploaded-pic"><?php the_post_thumbnail('upload'); ?></div>
<div class="red-frame uploaded-pic"><?php the_post_thumbnail('upload'); ?></div>
<?php } ?>
CSS
.uploaded-pic img{width:130px; height:130px;}
.blue-frame img{transform:rotate(35deg); -ms-transform:rotate(35deg); /* IE 9 */ -webkit-transform:rotate(35deg); /* Opera, Chrome, and Safari */}
.red-frame img{transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */}
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.
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.
I'd like my primary links in Drupal to look like this in code:
<a class="active" title="Go to the Foo Homepage" href="/"><span>Home</span></a>
Rather than:
<a class="active" title="Go to the Foo Homepage" href="/">Home</a>
So I can then style the span separately from the a.
(I know that sounds like a slightly strange thing to do, but it's to do with working around IE's lack of border-radius support coupled with the inability to set 2 background images.)
So do you know where & how I get Drupal to insert these tags in all my primary links?
I'm guessing, somewhere in your page.tpl.php, you have something like this to display the primary menu :
print theme('links', $primary_links, array('class' => 'links primary-links'));
One solution (might not be the cleanest one -- but should work) would be to iterate on the elements of $primary_links, to, for each one, :
activate HTML mode
wrap the title with <span> and </span>
If your menu has only one level, I suppose this would do :
foreach ($primary_links as & $link) {
$link['html'] = true;
$link['title'] = '<span>' . $link['title'] . '</span>';
}
And, after that, you can call theme like you're already doing now.
With that, you should get <span> tags arround the text of the link, without having them injected in the title's attribute of the <a> tags.
I you have more levels in your menu, you will have to iterate farther down ; either with two imbricated loops, or with some kind of recursion if you don't know the depth of your menus.
(I'll let you have fun with that ; what I said should be enough to get you started ;-) )
As a sidenote, this could probably done somewhere in template.php too... Might be a better place ; but I'll let you decide which solution you prefer...
Have fun !
This should help http://drupal.org/node/221382
Scroll down to this comment for the final solution http://drupal.org/node/221382#comment-755469. There are issues with the html output which are resolved there.
For the record, in the end I just used the menu_html module and entered the menu items as <span>Menu Item 1</span> in the relevant dialogues.
In fact I ended up with <span><span>Menu Item Expanded</span></span> in one of them because it was expanded and already had a background image set. It now has 3!
At least my curved corners on my tabs are working now in IE. Another time that IE soaks up 5/6 hours just because it doesn't support CSS properly!