Forum Support

Shape 5
March 28, 2024, 06:07:48 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Link Color  (Read 379 times)
ccvid
Jr. Member
**
Offline Offline

Posts: 100



« on: August 06, 2014, 03:13:05 PM »

How would I change the overall link color on the website.  I've been adding <span style="color: #0099ff;"></span> to links in modules and articles... I think I like it enough I'd like the color change to be a site-wide thing.

Thanks!
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: August 06, 2014, 04:34:06 PM »

Hello,

In the Template.CSS you will see a call for the default link value like so:

Code:
a {
    text-decoration: none;
}

The thing is even if you add a color here most of the links used on the site are called more specifically throughout the site. For example the heading links used in the components have this CSS:

Code:
Template.CSS - Line 675
.item h2 a, .item h2, .page-header h2 a, .page-header h2 {
    color: #000000;
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 15px;
}

Which would overrule any default a { color.

In-lining link colors isn't really a good practice as all your styling should be kept in a separate file most of the time. You can always add a class or id to the elements you are adding and stylize them in the custom.css file to be cleaner. Here is an example:

HTML

Code:
<div class="border"> This Div has a Border </div>

CSS

Code:
.border {
border: 1px solid #000000;}

Then you can reuse the class css on any div you want in the future. It looks much cleaner than adding something like this to everything:

Code:
<div style="border: 1px solid #000000;">  This Div has a Border </div>

Be sure to utilize Firebug or Chrome Developer Tools to easily identify where link colors are being generated from.

Regards,
« Last Edit: August 06, 2014, 04:37:17 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
ccvid
Jr. Member
**
Offline Offline

Posts: 100



« Reply #2 on: August 07, 2014, 09:04:11 AM »

In the Template.CSS you will see a call for the default link value like so:

Code:
a {
    text-decoration: none;
}

That's exactly what I needed.  I'm cool with heading and menu links being different colors.  Thanks for the help!

Ben
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: August 07, 2014, 08:36:11 PM »

No problem Smiley

Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.