Page 1 of 2 12 LastLast
Results 1 to 10 of 16
  1. #1
    Join Date
    Jan 2009
    Posts
    54
    Plugin Contributions
    0

    Default CSS for: Congratulations! You have successfully...

    I changed the text in home page where it used to say "Congratulations! You have successfully installed...". Now I would like to edit the CSS for this to center my new text and change the font color.

    Where is the CSS file that controls this?

    Thanks...

  2. #2
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    Best bet is to install the Web Developer tools in Firefox and use them (or the similar Firebug tools) to find the elements you need to style. Once installed, you'll find you're using this all the time, for many things. Trust me.

    Rob

  3. #3
    Join Date
    Jan 2009
    Posts
    54
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    I installed the Web Developer tools into Firefox. Now which tool do I use? I see the CSS menu and I viewed CSS for the ZenCart home page but I don't see any CSS related to Congratulations! etc etc

  4. #4
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: CSS for: Congratulations! You have successfully...

    Hit Ctrl-Shift-Y and when you hover over an element, it will show you the id or class in the bar at the top.

    Clicking on an element while in that mode will show you the CSS (if any) for that element. You can't edit from there, though. Ctrl-Shift-E for that.

  5. #5
    Join Date
    Jan 2009
    Posts
    54
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    I see how Ctrl-Y and Ctrl-E work. Very cool.

    But won't any edits only be made in memory for the page in the browser at that moment? I mean the souce CSS won't be changed right? How do I find the CSS file so I can make permanent changes?

  6. #6
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    I will assume you have a local copy of your Zen Cart. I like to keep both a pristine, as-downloaded copy, as well as a backup copy of all my as-modified site files. In either case you will find the css in...
    /includes/templates/YOUR_TEMPLATE/css/stylesheet.css

    The YOUR_TEMPLATE part means whatever the name of your custom template is. If you don't know why that's important, read the Tutorials and FAQs about Override folders.

    Once you've got the right file open in a text editor (not a word processor) make the same changes there that you made using Edit CSS in the Web Dev tools. Best is to just copy and paste your changes.

    HTH

    Rob

  7. #7
    Join Date
    Jan 2009
    Posts
    54
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    OK, I see this CSS line at the top of my FF browser when I hold the cursor over the main header text "Congratulations!..." etc etc.

    Here is the CSS debug string:

    html > body #indexHomeBody > div #mainWrapper > div #headerWrapper > div #logoWrapper > div #taglineWrapper > div #tagline > h1

    Now in line 209 of the classic CSS file stylesheet.css I see this code snippet:

    HTML Code:
    #tagline {
    	color:#FFFFFF;
    	font-size: 1.5em;
    	text-align : center;
    	vertical-align: middle;
    	}
    When I change the font-size that works.
    When I change the color that does not work! I changed the color to #FF0000; which is Blue) but there is no color change.

    Am I changing the CSS in the right section? #tagline?

  8. #8

    Default Re: CSS for: Congratulations! You have successfully...

    I believe that you can stylize your entire front page by going to Tools >> Define Pages Editor in your Admin panel. Set the editor to 'HTMLarea', and then select 'define_main_page.php'.

    Others may know better, but I stylized my entire main page from the Admin panel.
    GHarls@}-',--
    DataGrange Design Studio
    Web Design and Consulting

  9. #9
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,024
    Plugin Contributions
    3

    Default Re: CSS for: Congratulations! You have successfully...

    #FF0000 is red.

    If changing the font size in that area works, changing the color should work, too.

    You can embed styling directly in the page using the define pages editor, but I believe it makes more sense to use the stylesheet method.

    If we could see a link to your site, it would be easier to advise.

  10. #10
    Join Date
    Nov 2006
    Location
    Dartmouth, NS Canada
    Posts
    2,378
    Plugin Contributions
    0

    Default Re: CSS for: Congratulations! You have successfully...

    Quote Originally Posted by rfresh View Post
    When I change the font-size that works.
    When I change the color that does not work!
    I wonder if there is another #tagline further down in the stylesheet? If so, the definition there will override the earlier one. (Definitions are applied in the order the browser sees them.)

    Also, #tagline may be defined in another stylesheet. As stevesh says, a link will allow us to debug the issue much more easily.

    Rob

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v151 Congratulations! You have successfully installed ...
    By evilsorcerer1 in forum General Questions
    Replies: 11
    Last Post: 28 May 2013, 03:47 AM
  2. Congratulations! You have successfully installed...
    By site in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 11 Nov 2009, 06:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR