CSS question

[grant]

Hi all,

We have just upgraded one of our clients installations from version 7 to V8. The V7 installation was using the smart Theme that we customised quite a bit to get the look they wanted.

During the upgrade process, all went well. The catalog is looking good, and just like the V7 version EXCEPT for one thing.

We have a navigation bar running horizontally across the top of the page, with links like Home, Info, View Cart etc etc.

Before these textual links were White, controlled with a CSS tag called actxxsmall . But now they are Black. I have changed all references to actxxsmall in the 3 style sheets I can find (site1 folder/previewhtml folder/sitehtml folder) but the links stubournly remain black.

When I use the new Design tab (looks good by the way) I seem to be able to fiddle with the spans etc for individual links. Below is a copy and paste of what I see when clicking on the home link. (it is all on one line)

<span class="actxxsmall">|</span>&nbsp;<a href="<actinic:variable name="HomePageURL" />" target="_self"></font><span class="actxxsmall"><strong><actinic:variable name="HomeText" /></strong></span></a>&nbsp;<span class="actxxsmall">|</span>

Which style sheet should I be concentrating on, and why do the links remain black?? The CSS from the style sheet is below.

.actxxsmall {
font-size:12px;
color:#ffffff;
}
.actxxsmall a:link, .actxxsmall a:visited, .actxxsmall a:active {
color: #ffffff;
}
.actxxsmall a:hover {
color: #ffffff;
}

Any help will be greatly appreciated

Grant

[jont]

The navigation bar in v7 is a pain to sort initially - v8 in my experience so far has always dumped an original default layout in place of the upgrade. Most likely cause of it staying black is the cascade - the colour is being inherited further down the line - usually from a pseudo class for the <a> tag or a miss formed statement.

I find it better, in terms of sanity and cleaner code (your example above is living proof) to use a <div id="n"> wrapping the whole navigation and then using pseudo / child selectors from that in the css eg:

#navigationBAR a {
font-size: 12px;
color: #fff;
text-decoration: none;
}

etc for the link, visited, hover and active states.

Using the ID in the <div> bumps the specificity and allows better control.

HTH

[grant]

Thank you Jont,

Yeah, that is the way I would prefer to do it. Just chicken to play with too much of the Actinic code already in place.

One question though, which style sheet should I be playing with? The one in the Site 1 folder or in the siteHTML folder??

[jont]

v8 themes now feature a actinic.css which can only be found inside of actinic and also a theme specific sheet cunningly named theme.css which has theme specific code ... there is also some embedded in the top of the main layout just for added fun. This is in the site1 folder (root)

The files in the siteHTML folder are the compiled versions and will be over written each time you upload the site - so best to avoid making changes in there

[grant]

Thank you Jont

[grant]

So I have changed the little element for the Home link to

<div id="nav">|&nbsp;<a href="<actinic:variable name="HomePageURL" />" target="_self"><strong><actinic:variable name="HomeText" /></strong></a>&nbsp;|</div>

and included this in the main CSS file in the Site 1 directory

#nav {
font-size:12px;
color:#ffffff;
}
#nav a:link, #nav a:visited, #nav a:active {
color: #ffffff;
}
#nav a:hover {
color: #ffffff;
}

Now the link has defaulted to blue, and not black. But it still aint White - Arrrggghhh.

Whimper - help - whimper

[grant]

I have also tried to wrap the Whole navigation table in the div like so

<div id="nav">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="images/navl.gif" bgcolor="#000000"><table width="780" border="0" cellpadding="0" cellspacing="0" background="images/nav.gif">
<tr>
<td width="10"><img src="shim.gif" height="30" width="10"></td>
<td><actinic:variable name="QuickSearchBar"/></td>
<td align="right"><actinic:variable name="NavigationBar"/>&nbsp;</td>
</tr>
</table></td>
</tr>
</table>
</div>

and included in the CSS

#nav {
font-size:12px;
color:#ffffff;
}
#nav a:link, #nav a:visited, #nav a:active {
color: #ffffff;
}
#nav a:hover {
color: #ffffff;
}
#nav td {
font-size:12px;
color:#ffffff;
}
#nav td a:link, #nav td a:visited, #nav td a:active {
color: #ffffff;
}
#nav td a:hover {
color: #ffffff;
}

But this wont work either. All I wanna do is make some links go white

[cdicken]

Grant, I think the actinic.css file in the 'Site1' folder is leftover from v7 - and isn't used anymore with v8.

I think what you need to do is enter the code into a layout in Actinic called 'Actinic Stylesheet' - which generates the 'actinic.css' file that is used in the preview and used in the online store.

To access this layout.

1) Go to the 'Design' tab and locate the 'Select Page Type' drop down box at the top left of the tab,

2) Change the list to 'Actinic Stylesheet'.

3) Enter your custom css at the bottom of this layout (in the 'Layout Code' panel in the bottom half of the tab)

4) Click 'Apply'.

Now change the 'Select Page Type' back to 'Content Page'.

[fergusw]

Grant,
The default "blue" you are getting is most likely coming from the default style for all a selectors in the stylesheet.

What I prefer to use when <a href...> styles are require is a selector specific style defined in the <a> tag

e.g.
|&nbsp;<a href="<actinic:variable name="HomePageURL" />" target="_self" class="LinkWhiteMenu"><strong><actinic:variable name="HomeText" /></strong></a>&nbsp;|

a.LinkWhiteMenu:link, a.LinkWhiteMenu:visited, a.LinkWhiteMenu:active {
color: #ffffff;
}
a.LinkWhiteMenu:hover {
color: #ffffff;
}

It is then up to you if you need the <div> or not.

[jont]

actinic.css which can only be found inside of actinic

See Chris beat me to it

[grant]

Sorry for the spamming, but got it sussed - add the css bits into the theme.css file

Thanks

[jont]

a.LinkWhiteMenu:hover {
color: #ffffff;
}

Generally not a good idea to use the colour in the css name as you may decide to change to Neon Pink in a few months time and the name then becomes meaningless ... better to use a descriptive name of its use / position

[fergusw]

Generally not a good idea to use the colour in the css name
.... ... better to use a descriptive name of its use / position

I agree - bad example of the style name perhaps. Thanks for raising this point Jont.

As with any CSS, or programming language for that matter, the naming convention you choose to utilise can effect the scalability and ease of comprehension of the code you write and if sharing it with others it is always best to use the most commonly accepted convention.

[wjcampbe]

There is a very good explanation of the Hungarian Notation variable naming convention here http://www.gregleg.com/oldHome/hungarian.html