Joomla Templates Club 406,261 posts

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#135059

Hi Everyone

I would like to modify the default cyan colour that appears in breadcrumbs and elsewhere:

Does anybody know which CSS and which lines I need to edit in order to modify this colour?

I’m using J 1.5.7

Thanks
Chris

[tonyg Friend tonygJoin date: June 2008Posts: 197Downloads:0Uploads:8 Thanks: 18 Thanked: 46 times in 27 posts]

#277987

Hi Chris

Locate yourdomaintemplateja_mesolitecsstemplate.css and look for this code:
div.moduletable h3 span,
div.moduletable_menu h3 span,
div.moduletable_text h3 span,
div.moduletable_hilite h3 span {
color: #00A9DD; /* this is the colour*/
}

I would have giving you the number to locate this but my has changed so it won’t match yours.

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#278007

Hi Tony

Many thanks for that. I found the relative bit of code and changed it as follows:

}

div.moduletable h3 span,
div.moduletable_menu h3 span,
div.moduletable_text h3 span,
div.moduletable_hilite h3 span {
color: #110F7D;
}

I then refreshed the site in the browser, but still the same:

I also tried another browser just to make sure it wasn’t cached!

Anywhere else I can find this?

Many Thanks
Chris

[tonyg Friend tonygJoin date: June 2008Posts: 197Downloads:0Uploads:8 Thanks: 18 Thanked: 46 times in 27 posts]

#278014

Hi Chris

I did this on local server with your colour code and it works on my. Look at the attachement.

---

Attachments:

1. 

[tonyg Friend tonygJoin date: June 2008Posts: 197Downloads:0Uploads:8 Thanks: 18 Thanked: 46 times in 27 posts]

#278017

Hi Chris

I just spotted my mistake, it is “You are here” I was looking at “New here”. My apologies, give me a few seconds.

[tonyg Friend tonygJoin date: June 2008Posts: 197Downloads:0Uploads:8 Thanks: 18 Thanked: 46 times in 27 posts]

#278019

Hi again,

Find below the code, same location as before

#ja-pathway strong {
margin-right: 5px;
color: #00A9DD;

1 user says Thank You to tonyg for this useful post

1. questbg

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#278024

Brilliant … many thanks Tony, that works fine!

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#279231

Sorry Tony, me again! I hope you’re still subscribed to this topic and get a notification!!

All is working well on the breadcrumbs, however, I’ve been wading through the template.css file and I can’t find the area where I can change the colour of the ‘next’ and ‘previous’ buttons:

Any pointers would be gratefully received! 🙂

Thanks
Chris

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#279244

Hi guestbg, the easiest way to change a colour theme is to identify the colour you want to change and then open your .css in a text editor or code editor that has ‘Find and Replace’. To identify the colour use Web Developer or Firebug. This way you can replace all instance of the colour with one click.

I use http://www.wingrep.com. With this programme you can search (and replace) text in whole directories without opening any files. You can tell it to look in .css files ONLY. Tell it to make backups…. it has loads of great features and it’s free!

In the un-edited mesolite there are 20 instances of #00A9DD. Including menu and VM .css files:p

BTW: The one you are trying to change above is line 176 (of unedited template.css)

.button {
background:#00A9DD none repeat scroll 0 0;
border:1px solid #00A9DD;
color:#FFFFFF;
font-weight:bold;
padding:2px 8px;
}

Get yourself Firebug and it is very easy to identify where these colour codes are. just click the Inspect button and click on the element you want to know the css for.

http://getfirebug.com/

1 user says Thank You to scotty for this useful post

1. questbg

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#279315

Hi Scotty. Many thanks for that. Just installed Firebug … it’s awesome!

Cheers
Chris

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#279317

Hi Scotty

Me again!

I tried to edit the template.css file but couldn’t find the code indicated in your post above. The only code like that was:

.button {
padding: 2px 8px;
border: 1px solid #db4455;
background: #db4455;
font-weight: bold;
color: #FFFFFF;
}

So I modified the 2 instances of ‘#db4455’ to ‘#1C19BA’, but this had a very weird effect:

Fortunately, I took a backup 🙂

I couldn’t figure out how I could get Firebug to actually show me this bit of code either, so any more pointers most appreciated!!

Thanks
Chris

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#279334

hm… the code I posted is from the CSS of the demo of Mesolite…
http://template15.joomlart.com/ja_mesolite/templates/ja_mesolite/css/template.css and the code is definitely there on line 176.

Are you working on the Quickstart? If so, does it look like the Demo version?

Your ‘Next’ and ‘Prev’ buttons are not like the Demo version. Have a look in the CSS for somthing like ul.pagination li span and see if there is a border and background on it. Or just click on it after clicking on Inspect in Firebug, that should tell you straight away what the styling is.

Do you have a live URL?

[tonyg Friend tonygJoin date: June 2008Posts: 197Downloads:0Uploads:8 Thanks: 18 Thanked: 46 times in 27 posts]

#279340

Hi Chris

Unfortunately I’m away so I couldn’t actually test this on my local installation but try it out. Go to red.css (change red to the colour you sre using) and locate:

ul.pagination a:hover, ul.pagination a:active,
ul.pagination a:focus {
background:#000000 none repeat scroll 0 0;
}

Let me know if this wprks or not

[questbg Friend questbgJoin date: May 2008Posts: 1912Downloads:0Uploads:1 Thanks: 146 Thanked: 339 times in 197 posts]

#279371

Hi Scotty

<em>@scotty 90985 wrote:</em><blockquote>hm… the code I posted is from the CSS of the demo of Mesolite…
Are you working on the Quickstart? If so, does it look like the Demo version?
</blockquote>

No, it looks nothing like the demo version! 🙂

Menalto (JA Mod) hacked the code for me to match a client brief. I imagine it’s heavily modified from the original.

<em>@scotty 90985 wrote:</em><blockquote>Or just click on it after clicking on Inspect in Firebug, that should tell you straight away what the styling is.
</blockquote>

This is what Firebug gave me when I clicked on the button:

<em>@scotty 90985 wrote:</em><blockquote>Do you have a live URL?
</blockquote>

Yes, the site is currently in ‘testing’ here: http://www.blfs.questbg.com

Hi Tony
<em>@tonyg 90991 wrote:</em><blockquote>Go to red.css (change red to the colour you sre using) and locate:

ul.pagination a:hover, ul.pagination a:active,
ul.pagination a:focus {
background:#000000 none repeat scroll 0 0;
}
</blockquote>

I think this may be something else Menalto has been hacking! 🙂

The code I have is a bit different:

}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
background: #B01C1C;
}

Should I try changing the colour here?

Thanks both for your assistance!

Chris

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#279388

You need to make your non link pagination have the same style as the linking ones, that is why some of the boxes appear to be missing up above. They are not links as it is the first page.

Try something like… template.css (line 389)

ul.pagination li span {
background:#666666 none repeat scroll 0 0;
color:#FFFFFF;
font-weight:bold;
padding:2px 5px;
}

1 user says Thank You to scotty for this useful post

1. questbg

[Author]

Posts