Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Menu Blocks


  #1  
Old Aug 8, 2012, 10:18 AM
richard-hards
 
23 posts · Jul 2012
Hi

Does anyone how I can achieve Menu block dividers like those found on http://www.guardian.co.uk/?
  #2  
Old Aug 8, 2012, 12:04 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You might try using CSS to put left borders on all the menu items and then remove it from the home/first menu item with other CSS.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Aug 8, 2012, 10:42 PM
richard-hards
 
23 posts · Jul 2012
ok. will give it a try.

thanks.
  #4  
Old Aug 8, 2012, 10:50 PM
richard-hards
 
23 posts · Jul 2012
i promise i will be posting less once i get the hang of this bit i think.

do i add css to the CSS Inserts or do I need to head to Configure CSS?

If i have a go, can you advise me if it doesn't work?
  #5  
Old Aug 9, 2012, 12:55 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try it in each place and report the results - learn by doing
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Aug 9, 2012, 05:39 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Another option is to put a | on the sides of the name of the menu item if you use the WordPress menu (Appearance>Menus>
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Aug 10, 2012, 10:54 AM
richard-hards
 
23 posts · Jul 2012
i tried this in the CSS insert section (this worked with a previous theme):

.menu1 {
border-left:1px solid #000;
color:#000;
display:block;
}

but it didn't work. can anyone help me out with this? i am not sure whether I have the CSS for the menu correct
  #8  
Old Aug 10, 2012, 12:04 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Sometimes you have to add !important
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Aug 10, 2012, 01:25 PM
richard-hards
 
23 posts · Jul 2012
not sure if that is a joke? if not, how would i insert it in to the css?
  #10  
Old Aug 10, 2012, 01:53 PM
richard-hards
 
23 posts · Jul 2012
on the guardian website it has the following:

#zones-nav #global-nav ul li a {
border-right: 1px solid #BEBEBE;

can this help if this is amended?
  #11  
Old Aug 10, 2012, 05:47 PM
richard-hards
 
23 posts · Jul 2012
Please help, i have looked in a book that i have and i think it can be resolved with CSS use of 'border' and leaving out or keeping the values of top and bottom at 0 so that the sides remain.

BUT, how do i edit the CSS of the PAGE and CATEGORY menus? I have been trying to add:

'border-width: 2px 1px 1px 2px;'

and it doesn't work. i guess this is because it needs to have something to refer to?
  #12  
Old Aug 10, 2012, 06:08 PM
richard-hards
 
23 posts · Jul 2012
i have been locating code in the css stylesheet and amending it in the css insert section and it appears to be working.

i wanted to change the borders but i am struggling. i found this:

div#menu2 ul.rMenu-ver {
border-top: <?php echo $bfa_ata['anchor_border_cat_menu_bar']; ?>;
}

i can't work out the bit in the triangle brackets. is this now referring to something else which i need to find before i can edit the borders?
  #13  
Old Aug 10, 2012, 06:28 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
the best way to do this is use FireBug in firefox and examine the element, then you will see the CSS that is being applied. You can even dynamically change teh CSS to test things, then you will know waht to add to the css inserts.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Aug 11, 2012, 03:05 AM
richard-hards
 
23 posts · Jul 2012
cheers. have been using firebug to work out a few things.

i have got to this below, but i would like to reduce the height of the left and right borders so they are the same size as my menu items - any ideas?

}
div#menu2 ul.rMenu li a {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
  #15  
Old Aug 11, 2012, 03:19 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
without knowing the url of your site, there is no way to know
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
blocks, menu

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Additional black blocks appear in some widgets freecityguides Sidebars & Widgets 1 Jan 2, 2012 02:36 AM
Want to remove color blocks from page menu tsheridan Page & Category Menu Bars 1 Mar 31, 2011 04:40 PM
[SOLVED] Page Menu Background - getting rid of color blocks? mcphoto Page & Category Menu Bars 2 Mar 4, 2011 02:08 PM
making a blank space between blocks nautilus Post-Kicker, -Byline & -Footer 1 Dec 23, 2009 05:59 AM


All times are GMT -6. The time now is 03:34 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.