• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 166
  • Last Modified:

Trying to get bold font to apply

Please see:

https://www.piratewear.com/Default.aspx

vs

http://test1.campuswebstore.com/Default.aspx

I am trying to get the bold styling to apply to the left hand side nav bar items on the test1 site.


I request help in tracking this down.
0
Tom Knowlton
Asked:
Tom Knowlton
  • 4
  • 2
1 Solution
 
jonahzonaCommented:
The first thing you need to do is put your list <li> elements into a <ul> element. This will help your styling.
I would also suggest a class for it as well.

So before the <li> elements you would need to add

<ul class="nav">
 <li>...</li>
 <li...</li>
</ul>

Open in new window


Then you can add the following:

ul.nav li a {
    color: Black;
    font-family: Arial Black;
    font-size: 1em;
    text-transform: uppercase;
}

Open in new window


Let me know if you have any questions.
0
 
jonahzonaCommented:
Looks like I had to add an !important to get the color to work.

ul.nav li a {
    color: black !important;
    font-family: Arial Black;
    font-size: 1em;
    text-transform: uppercase;
}

Open in new window


I edited the page and it came out looking as desired. Here is the screenshot.

 Screenshot
I am not sure what platform you are building on and what is outputting the HTML, but here is the HTML as well, just so you can see how to nest the UL element.

<ul class="nav">
<li id="ctl00_Catalogs1_Repeater1_ctl00_licat"><a href="Catalog.aspx?CID=104&amp;c=Accessories-" id="ctl00_Catalogs1_Repeater1_ctl00_HyperLink1" style="color: #003875; text-align:left;">
    Accessories </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl01_licat"><a href="Catalog.aspx?CID=106&amp;c=Alumni-" id="ctl00_Catalogs1_Repeater1_ctl01_HyperLink1" style="color: #003875; text-align:left;">
    Alumni </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl02_licat"><a href="Catalog.aspx?CID=107&amp;c=Auto-" id="ctl00_Catalogs1_Repeater1_ctl02_HyperLink1" style="color: #003875; text-align:left;">
    Auto </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl03_licat"><a href="Catalog.aspx?CID=109&amp;c=Bags-and-Purses-" id="ctl00_Catalogs1_Repeater1_ctl03_HyperLink1" style="color: #003875; text-align:left;">
    Bags and Purses </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl04_licat"><a href="Catalog.aspx?CID=110&amp;c=Caps-and-Hats-" id="ctl00_Catalogs1_Repeater1_ctl04_HyperLink1" style="color: #003875; text-align:left;">
    Caps and Hats </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl05_licat"><a href="Catalog.aspx?CID=111&amp;c=Decals-" id="ctl00_Catalogs1_Repeater1_ctl05_HyperLink1" style="color: #003875; text-align:left;">
    Decals </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl06_licat"><a href="Catalog.aspx?CID=112&amp;c=Diploma-Frame-" id="ctl00_Catalogs1_Repeater1_ctl06_HyperLink1" style="color: #003875; text-align:left;">
    Diploma Frame </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl07_licat"><a href="Catalog.aspx?CID=113&amp;c=Game-Day-" id="ctl00_Catalogs1_Repeater1_ctl07_HyperLink1" style="color: #003875; text-align:left;">
    Game Day </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl08_licat"><a href="Catalog.aspx?CID=114&amp;c=Gift-Cards-" id="ctl00_Catalogs1_Repeater1_ctl08_HyperLink1" style="color: #003875; text-align:left;">
    Gift Cards </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl09_licat"><a href="Catalog.aspx?CID=131&amp;c=Greek" id="ctl00_Catalogs1_Repeater1_ctl09_HyperLink1" style="color: #003875; text-align:left;">
    Greek</a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl10_licat"><a href="Catalog.aspx?CID=115&amp;c=Home-amp-Office-" id="ctl00_Catalogs1_Repeater1_ctl10_HyperLink1" style="color: #003875; text-align:left;">
    Home &amp; Office </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl11_licat"><a href="Catalog.aspx?CID=124&amp;c=Jackets" id="ctl00_Catalogs1_Repeater1_ctl11_HyperLink1" style="color: #003875; text-align:left;">
    Jackets</a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl12_licat"><a href="Catalog.aspx?CID=116&amp;c=Jewelry-" id="ctl00_Catalogs1_Repeater1_ctl12_HyperLink1" style="color: #003875; text-align:left;">
    Jewelry </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl13_licat"><a href="Catalog.aspx?CID=117&amp;c=Ladies-Apparel-" id="ctl00_Catalogs1_Repeater1_ctl13_HyperLink1" style="color: #003875; text-align:left;">
    Ladies Apparel </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl14_licat"><a href="Catalog.aspx?CID=119&amp;c=Lil-PirateWear-" id="ctl00_Catalogs1_Repeater1_ctl14_HyperLink1" style="color: #003875; text-align:left;">
    Lil PirateWear </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl15_licat"><a href="Catalog.aspx?CID=120&amp;c=Mens-Apparel-" id="ctl00_Catalogs1_Repeater1_ctl15_HyperLink1" style="color: #003875; text-align:left;">
    Mens Apparel </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl16_licat"><a href="Catalog.aspx?CID=118&amp;c=Prints-" id="ctl00_Catalogs1_Repeater1_ctl16_HyperLink1" style="color: #003875; text-align:left;">
    Prints </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl17_licat"><a href="Catalog.aspx?CID=125&amp;c=Pets-" id="ctl00_Catalogs1_Repeater1_ctl17_HyperLink1" style="color: #003875; text-align:left;">
    Pets </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl18_licat"><a href="Catalog.aspx?CID=121&amp;c=Rain-Gear-" id="ctl00_Catalogs1_Repeater1_ctl18_HyperLink1" style="color: #003875; text-align:left;">
    Rain Gear </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl19_licat"><a href="Catalog.aspx?CID=122&amp;c=Seasonal-" id="ctl00_Catalogs1_Repeater1_ctl19_HyperLink1" style="color: #003875; text-align:left;">
    Seasonal </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl20_licat"><a href="Catalog.aspx?CID=123&amp;c=Sporting-Goods-" id="ctl00_Catalogs1_Repeater1_ctl20_HyperLink1" style="color: #003875; text-align:left;">
    Sporting Goods </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl21_licat"><a href="Catalog.aspx?CID=108&amp;c=Sweats" id="ctl00_Catalogs1_Repeater1_ctl21_HyperLink1" style="color: #003875; text-align:left;">
    Sweats</a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl22_licat"><a href="Catalog.aspx?CID=103&amp;c=T-Shirts" id="ctl00_Catalogs1_Repeater1_ctl22_HyperLink1" style="color: #003875; text-align:left;">
    T-Shirts</a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl23_licat"><a href="Catalog.aspx?CID=128&amp;c=Nike-" id="ctl00_Catalogs1_Repeater1_ctl23_HyperLink1" style="color: #003875; text-align:left;">
    Nike </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl24_licat"><a href="Catalog.aspx?CID=127&amp;c=Under-Armour-" id="ctl00_Catalogs1_Repeater1_ctl24_HyperLink1" style="color: #003875; text-align:left;">
    Under Armour </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl25_licat"><a href="Catalog.aspx?CID=129&amp;c=Skully-and-More-" id="ctl00_Catalogs1_Repeater1_ctl25_HyperLink1" style="color: #003875; text-align:left;">
    Skully and More </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl26_licat"><a href="Catalog.aspx?CID=126&amp;c=Sale-Items-" id="ctl00_Catalogs1_Repeater1_ctl26_HyperLink1" style="color: #003875; text-align:left;">
    Sale Items </a></li>
    
<li id="ctl00_Catalogs1_Repeater1_ctl27_licat"><a href="Catalog.aspx?CID=132&amp;c=GUY-HARVEY" id="ctl00_Catalogs1_Repeater1_ctl27_HyperLink1" style="color: #003875; text-align:left;">
    GUY HARVEY</a></li>
    
</ul>

Open in new window

0
 
jonahzonaCommented:
As an alternative, you can simply add

li a {
    color: black !important;
    font-family: Arial Black;
    font-size: 1em;
    text-transform: uppercase;
}

Open in new window


However, your code will not validate unless the <li> elements are listed inside of a <ul> or <ol>.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Tom KnowltonWeb developerAuthor Commented:
Better now:

http://test1.campuswebstore.com/Default.aspx


But why is the font color not black?


Here is the catalog control code that generates the left hand side links:


<%@ Control Language="C#" AutoEventWireup="true" Inherits="Campus_Webstore.UserControls.Catalogs" CodeBehind="Catalogs.ascx.cs" %>

<asp:Repeater ID="Repeater1" runat="server" onprerender="Repeater1_PreRender">
    <ItemTemplate>
<div id="licat" runat="server" class="catnav"><a class="catnav" href='<%#string.Concat("~/Catalog.aspx?CID=",Eval("CATID"),"&c=",Eval("SEOURL"))%>'
    id="HyperLink1" runat="server">
    <%# Eval("DESC") %></a></div>
    </ItemTemplate>
</asp:Repeater>

Open in new window





Here is the "catnav" class:

.catnav {
    color: Black;
    font-family: Arial Black;
    font-size: 1em;
    text-transform: uppercase;
}

Open in new window




0
 
jonahzonaCommented:
Make it

.catnav {
    color: Black !important;
    font-family: Arial Black;
    font-size: 1em;
    text-transform: uppercase;
}

Open in new window


The !important on the end of the color will overwrite any other color call.
0
 
Tom KnowltonWeb developerAuthor Commented:
thx.

I have another question...same two sites...I'll post in a minute.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now