Announcement

Collapse
No announcement yet.

change site width

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    change site width

    I'm using Contempory theme and have quite a narrow site. I've decided to do some work and upgrade it. I was looking to make the site about 1000px but having read the help and forum and playing around I'm still unabale to change the total width of the site.

    Some help would be appreciated. Please explain from basics so I don't get lost.

    Thanks

    www.fermain.com

    Any comments appreciated as well!

    #2
    Download firefox and the firebug plugin, these are a God send in these situations, designers use it all the time to do such things. Open up your site, click on 'inspect' and then hover over the different areas to find how widths and various styles are specified and thus where you need to head to change them (class names and the stylesheet are detailed on the right). The widths will be in either your CSS stylesheet or in the overall layout or a combination of those two. Start with the overall layout first, best place to start investigations, firebug will show you. There will either be class="xxxx" or width="xxx" i'd expect. You can even change sizes on the fly within firebug to see how your changes will affect the site, before doing them permanently within actinic.

    Comment


      #3
      Remember calculate in your margins as well
      "If my answers frighten you then you should cease asking scary questions"

      Comment


        #4
        Thanks for the advice, I will start there.

        Comment


          #5
          Using Firebug I can see how to change the widths of everything in the style sheets. However, I am still having trouble in Actinic. I go to the home page and look at the code, for instance <div id="maincontent">, right click and I get the code
          /* Styles for Contemporary Theme */

          {#maincontent
          margin: 0 auto;
          background-color: <actinic:variable name="PaletteBG" />;
          height: 100%;
          padding: 7px;
          width: 776px;
          voice-family: "\"}\"";
          voice-family: inherit;
          width: 762px;
          }

          html>div#maincontent {
          width: 776px;

          When I change the widths as I did in Firebug and preview the site nothing has changed. Confused!

          I had read the help and got to this stage before but when I didn't get any results that's when I asked the question on the forum. I'm obviously missing something.

          Comment


            #6
            I see 3 widths you need to change in those styles and you also need to do an upload after. The opening and closing brackets do not look right either { - opens it, } - closes it.

            Comment


              #7
              The brackets are ok, I just missed the last one out in the copy. I'm still not able to change it. Line 8 I changed the width to 1020px, line 11 to 1000px and line 15 to 1020px just to see how it looks. Click apply and upload but no change??

              Comment


                #8
                Originally posted by fermain View Post
                The brackets are ok, I just missed the last one out in the copy. I'm still not able to change it. Line 8 I changed the width to 1020px, line 11 to 1000px and line 15 to 1020px just to see how it looks. Click apply and upload but no change??
                Sorry the line numbers aren't on the copy. Those lines are where the width's are.

                Comment


                  #9
                  I presume you're editing the actinic.css file from within Actinic?
                  How does it look in design preview and browser page preview?

                  1. Try Compact Actinic and then recheck in Preview.
                  2. Backup then try deleting actinic.css from the siteHTML, PreviewHTML and DesignPreviewHTML folders. Also ftp to the site and rename the actinic.css file in the acatalog folder.

                  Comment


                    #10
                    Again I repeat, the brackets are not correct. Whether you have missed any off or not:

                    {#maincontent

                    is not how I have ever defined a style.

                    #maincontent {

                    is though.

                    Might not be the full answer, but lets gets the basics right first before we delve too deep.

                    Comment


                      #11
                      As you wish to keep ratios the same, it's just the overall size you wish to change, i'd also suggest the difference in the sizes defined is kept consistent with what it is as standard, ie 14px difference. You should not be defining any size bigger than 1000px also, it will break a 1024 screen.

                      Comment


                        #12
                        The brackets are correct in the code, Not sure that first bracket got there when I copied the code. I just put the figures in to see if a change had occurred which it hadn't.

                        I'll look at the other suggestions.

                        Thanks for your help.

                        Comment


                          #13
                          Originally posted by drounding View Post
                          I presume you're editing the actinic.css file from within Actinic?
                          How does it look in design preview and browser page preview?

                          1. Try Compact Actinic and then recheck in Preview.
                          2. Backup then try deleting actinic.css from the siteHTML, PreviewHTML and DesignPreviewHTML folders. Also ftp to the site and rename the actinic.css file in the acatalog folder.
                          I'm on the home page, in the code view, find the <div id="maincontent"> and right click and 'look up in stylesheet'. Gives this code -

                          /* Styles for Contemporary Theme */

                          #maincontent {
                          margin: 0 auto;
                          background-color: <actinic:variable name="PaletteBG" />;
                          height: 100%;
                          padding: 7px;
                          width: 776px;
                          voice-family: "\"}\"";
                          voice-family: inherit;
                          width: 762px;
                          }

                          html>div#maincontent {
                          width: 776px;
                          }

                          I'm changing the width values but nothing is changing. Looks the same in Page Preview and Preview Current Page.

                          Comment

                          Working...
                          X