13 replies [Last post]
waste82
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2008-07-09
Posts: 9
Points: 0

Hi,

Im trying to make the top and bottom navigation bars hold the hover colour when you are in one the particular pages... Can anyone help?

http://www.sohotuna.bigcartel.com/

Thanks
Nick

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 2 days 18 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

HAve a look at Sliding Doors

HAve a look at Sliding Doors of CSS and see if you understand how to do it Wink

Verschwindende wrote:
  • CSS doesn't make pies

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 5 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I don't even see any

I don't even see any navigation bars... ???

I'm no expert, but I fake one on teh Internets

waste82
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2008-07-09
Posts: 9
Points: 0

Stomme poes wrote:I don't

Stomme poes wrote:

I don't even see any navigation bars... ???

Sorry (bad analogy, I mean the links at the top and bottom of the hompage:

Mens | Womens | tees | Hoodies | Sweats

Info | Contact | Delivery etc

Nick

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

You are on a sub domain of

You are on a sub domain of bigcartel, so I am not sure what kind of access you have to the server (if you can upload php, etc., files). You cannot do this with just CSS there has to be something checking to see what page you are on. If in their code they have a "selected" or "current" state that you can style, you are in business. Assuming you only have access to alter a CSS file.

mattrossidesigns.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Actually you can use CSS to

Actually you can use CSS to keep a link highlight according to the page your on and we have covered the techniques many times before so if a quick search could be done on the forum archives you should find explanations - these however are not quite as good as the flexibility afforded by implementing a server side script

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

http://csscreator.com/node/29

http://csscreator.com/node/29953

However looking at the site 'bigcartel' tells me you are in the hands of a templated automated builder type site maker thingy, so to what degree you can effect things is going to be debatable but definitely limited and I guess you are not a coder?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

Hugo, to clarify what I was

Hugo, to clarify what I was saying, you cannot use CSS alone to determine the page you are on, and style it accordingly. Like you pointed out, if you have access to the HTML then you could add an id to the body, if these are all separate pages, and not just a template...which it looks like they are.

mattrossidesigns.com

waste82
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2008-07-09
Posts: 9
Points: 0

With the new themes

With the new themes bigcartel allows you all acccess to your stores css & html. Your correct in saying that I am not a coder, but have managed to make the chnages so far using site such as w3 schools to learn. This is the part I am struggling on and cant seem to find the answers through google.

I think and dont quote me on this, I need to add an id or unique class to the html code in question and then add the css rules.

maybe something like this? http://www.webmasterworld.com/forum83/8493.htm

The specific pages which can be alterd through big cartel are: CSS, Layout, Home, Products, Product.

If you need me to post any of the code on, please let me know.

Appreciate your help

Nick

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

If you have direct access to

If you have direct access to all of those html pages, you can follow what Hugo had mentioned, adding an ID to the body of each page, and then style accordingly.

mattrossidesigns.com

waste82
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2008-07-09
Posts: 9
Points: 0

so I would have to add and

so I would have to add and id to this section of code?

ifohdesigns
ifohdesigns's picture
Offline
Enthusiast
Providence, RI
Last seen: 10 years 11 weeks ago
Providence, RI
Timezone: GMT-4
Joined: 2008-02-22
Posts: 269
Points: 0

If you have access to the

If you have access to the full HTML of each of those pages you mentioned (products, home...) you would just add an ID to the body:

<body id="home">

Read that post that Hugo linked to.

mattrossidesigns.com

waste82
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2008-07-09
Posts: 9
Points: 0

I have read the post, I cant

I have read the post, I cant see any mention on where you place the

I have added the following to a test page: http://www.sohotuna.bigcartel.com/test which make it cascade vertically rather than horizontally

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

waste82 wrote:I have read

waste82 wrote:

I have read the post, I cant see any mention on where you place the

What about trying Wink

It is explained in the link but to reiterate: each page is given a unique identifier, as you see above; id="home", id="about".

give all your links classes or ids then create a ruleset that is similar to this:

#home .home,
#about .about {
background:red;
}
#home .home{} is a descendent selector pair it means if the class 'home' has a parent or ancestor/antecedent called #home then apply the rules, this pairing can only occur on one page! the one that has a body ID of #home and the link 'home' will have a red background? navigate to a second page and the link home will now no longer have a red background as the body ID has changed, it is no longer #home but #about so this time the second grouped descendent selectors are matched, #about .about is matched and the rules applied to that class name .about; now has a red background.

Quote:

I have added the following to a test page: http://www.sohotuna.bigcartel.com/test which make it cascade vertically rather than horizontally

If you want li elements to be inline then you must either float them or set them to display:inline. Before going further loose the align="center", , and learn to validate your markup all of those items mentioned are either deprecated , illegally used or incorrect syntax.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me