Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 163
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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