Post by aljawaid » Sun Nov 16, 2014 7:39 am

Hello

I have manage dto the the thin border line in the footer to a black/blue colour system but dont know how to add the same colour border round the menu banner where the categories go.

Is there an extra section I need to add to the CSS file because it is only one colour (blue)?

I want to be creative but my knowledge limits me lol so I am just trying to get a blue thin border round the menu banner and make the menu banner black with white or blue text.

The border seems the hard bit.

Any help would be highly appreciated.

Total e-commerce newbie bravely testing OC v2.0.3.1 before rolling it live...getting there slowly, somehow. Maybe not. I dunno.


Active Member

Posts

Joined
Fri Oct 10, 2014 10:33 pm
Location - UK

Post by aljawaid » Sun Nov 16, 2014 1:35 pm

Hello Again

I have worked on the obvious part of the menu but I am now stuck.

I need to make the categories BOLD as the blue is not shining through the way I expected it.

I also need to add a border around the whole menu bar as per my post above but I am clueless as the CSS file doesn't seem to give me any clues either lol

Anyone able to help?

Attachments


Total e-commerce newbie bravely testing OC v2.0.3.1 before rolling it live...getting there slowly, somehow. Maybe not. I dunno.


Active Member

Posts

Joined
Fri Oct 10, 2014 10:33 pm
Location - UK

Post by uksitebuilder » Sun Nov 16, 2014 6:47 pm

Depending on which browser you use, there are many extensions/add-ons which tell you what class and file for the spcific css are being used on a particular element by simply hovering over or clicking that element.

For FireFox, get the Firebug extension

For Google Chrome and Internet Explorer, I believe it is built-in - Simply right-click an element and choose Inspect Element

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by aljawaid » Sun Nov 16, 2014 9:34 pm

uksitebuilder wrote:Depending on which browser you use, there are many extensions/add-ons which tell you what class and file for the spcific css are being used on a particular element by simply hovering over or clicking that element.

For FireFox, get the Firebug extension

For Google Chrome and Internet Explorer, I believe it is built-in - Simply right-click an element and choose Inspect Element
Thanks for this, your explanations always make sense :)

I have found the navbar but the text for the categories and styling etc is pulled form the generic body.home (if that makes sense) so when i change it, it applies the changes to all the text on the page... but I need it specific just to my categories... am I looking at the wrong element or is there an override?

Total e-commerce newbie bravely testing OC v2.0.3.1 before rolling it live...getting there slowly, somehow. Maybe not. I dunno.


Active Member

Posts

Joined
Fri Oct 10, 2014 10:33 pm
Location - UK

Post by uksitebuilder » Mon Nov 17, 2014 2:59 am

Personally, I use firefbug for firefox for testing on the fly changes to styles etc. (Just a shame the resulting stylesheet cannot be saved easily after tinkering - I digress)

Using Firebug, I inspect a link on the menu

In the CSS panel of Firebug I can see that the following styles are present exactly on the menu link (around line 187 - 196 of stylesheet.css)

Code: Select all

#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}

Perfect, there's one for normal state and one for when it is hovered

So I can now add whatever I want to those styles

i.e. font-weight: bold;
change the colour
etc

User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by aljawaid » Mon Nov 17, 2014 1:05 pm

now that explanation sir has made things extremely clearer!

Thank you so much for your valuable information and knowledge

Total e-commerce newbie bravely testing OC v2.0.3.1 before rolling it live...getting there slowly, somehow. Maybe not. I dunno.


Active Member

Posts

Joined
Fri Oct 10, 2014 10:33 pm
Location - UK
Who is online

Users browsing this forum: No registered users and 7 guests