Announcement

Collapse
No announcement yet.

Contemporary Theme Layout

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Contemporary Theme Layout

    Would anyone be willing to let me know how to extend the grey sideline graphics to the bottom of the current page viewed rather than just the bottom of the catalogue page?

    See http://www.ultimate-av.co.uk/acatalog/DJ_Equipment.html for an example of this - I think it is tied up in the css of the site??

    Thanks
    Tags: None
    #2
    The colour is currently coming from the styling to the .body tag in the embedded styles (inside the main outer layout code).

    The easy solution is to add another class above the embedded .body class

    html {
    background-color: #cccccc;
    }

    this will style all the page but will create a grey bar beneath the bottom of the central white area when the middle inner layout is shorter than the side bars ... try it and see .... it is not bad.

    To create the side bar effect only you would need to restructure the XHTML layout to the outer layout and style the CSS accordingly.


    Bikster
    SellerDeck Designs and Responsive Themes

    Comment

      #3
      Any chance of a step by step guide for this jont?

      Sorry....

      Comment

        #4
        The embedded code is coming from the <head> area of Outer Layout.

        Switch to design tab and navigate up to the top most outer layout.. called something like "works best with contemporary theme".

        At the top in the <head> area you will see the embedded styles... add the above snippet as the first row at the top above the other styles (the first existing is the .body style)


        Bikster
        SellerDeck Designs and Responsive Themes

        Comment

          #5
          Am not sure it's worked...

          <style type="text/css">
          /* Here are some styles to override the default styles that are in the Actinic StyleSheet layout */
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsBackgroundColor%22%20%2f%3e">
          html {
          background-color: #cccccc;
          }

          body {
          background-color: <actinic:variable name="Palette3" />;
          background-image: url('theme_main_background.gif');
          background-repeat: repeat-x;
          }
          </actinic:block>

          Comment

            #6
            I applied the code (copy and pasted) into your site using Firefox web developer and it changed it on the fly to include the grey area at the bottom beneath the short columns.

            More difficult to snag using IE but as you are styling the whole of the HTML tag (which is the whole page) it should work.


            Bikster
            SellerDeck Designs and Responsive Themes

            Comment

              #7
              I see you have changed something else since as the left hand navigation is now invisible using Firefox .. I can see the link on the a:hover but not the a:active state for the links.


              Bikster
              SellerDeck Designs and Responsive Themes

              Comment

                #8
                Thanks jont, I seem to have got it working now - from what I have seen so far, it is applying it to all pages....

                Will update if I have a problem

                Thanks again

                Comment

                Previous template Next
                Working...
                X