Joomla Templates Club 406,261 posts

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#174716

Hi Guys,

One of the members previously told me I could use Google Chrome to work out lines of code to change and where to find things in the template css.

I have loaded it and upgraded my computer and can now see the lines of css code that I need to change.

However, on this site http://www.mybaliconcierge.com/index.php I was trying to work out where the text underneath the main picture “JA TIRIS JOOMLA 2.5.X TEMPLATE FOR E-COMMERCE” was coming from. Can i do that with Chrome? As when i use the Inspect Elemnt I am not sure what it is telling me.

Cheers Jim

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#442403

That particular text is coming from the menu of your homepage item. Go to your menu manager and select the home item. On the right you will see an accordian menu and one of hte items is titled “Page Display Options” and in there you will see the title.

1 user says Thank You to Phill for this useful post

1. James Weston

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#442429

Jim:
As usual, Phill is right-on-the-money with regard to that text/title issue.

So, as a side note – and just to offer some additional thought and comment as to the first part of your question – you CAN use Google Chrome to inspect elements of your site. This feature is particularly helpful in identifying various CSS elements – though in order to properly identify the specific CSS file and line number, you will need to set “Optimize CSS” to “No” within your Template Manager–General Settings. Otherwise, if you have your “Optimize CSS” set to “Join and Minify” . . . it will show you the relative CSS, but the indicated location of the CSS will not be accurate (as it will be identified as it is within it’s “compressed” mode). Make sense?

So, whenever you (or someone else) is asking a CSS modification related question, this is why you often see me (or another of my Support Team Colleagues) asking you to set “Optimmize CSS” to “No.” 😎

NOW . . . While I simply may not be as astute in using the Chrome Web Inspector as others, I have found it very difficult to try to test out customizing/modifying the CSS within the Chrome Inspector – as opposed to my being able to do so much easier using FIREBUG to do so (via right-clicking on the CSS rule and selecting “New Property” from the selection list). Again, this may simply be MY OWN lack-of-understanding of how to accomplish this via the Chrome Inspector … but unless/until I’m clued in, I will generally bring up a site in FireFox and use FIREBUG for testing out various CSS ideas/modifications in a real-time/live-view setting.

Anyway, just wanted to offer up that additional info – since you asked about using the Google Chrome Inspector within the first part of your original question.

Hope some of that helps.

🙂

P.S.
Here are some additional FREE WEB DEVELOPMENT TOOLS you may find helpful as you continue along your site development journey.

1 user says Thank You to TomC for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#442517

Thanks Tom, that makes a lot fo sense I will download firebug tonight. So basically what you are saying is that in firebug you can change something and see what it looks like before changing it on the real site. Now that is going to make life a whole lot easier 🙂

Thanks for all your help recently.

Jim

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#442520

<em>@origomedia 305980 wrote:</em><blockquote>Thanks Tom, that makes a lot fo sense I will download firebug tonight. So basically what you are saying is that in firebug you can change something and see what it looks like before changing it on the real site. Now that is going to make life a whole lot easier 🙂

Thanks for all your help recently.

Jim</blockquote>
Yep, it really is a helpful tool for testing out CSS modifications – in a real-time/live setting – before actually committing them to the site (i.e. making the modifications and saving the changes).

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#442523

Thanks Phil,

As always clear and easy to follow.

Jim

[Author]

Posts