Full service web hosting, great prices and support. Starts at $1.99/month!
Results 1 to 4 of 4

Thread: Moving the tabs at the top of the web page to the left side of the page

  1. #1
    markem
    Guest


    Default Moving the tabs at the top of the web page to the left side of the page

    I did a search first and found the posts about the 'class="tab"' which does not exist in the 2.0 version. Finally found the section which deals with the tabs as a list, tried several things both with just the HTML as well as the CSS but I just could not get the tabs to move from the right hand side of the page to the left. How do you do this?

    Also, since osCMax is going CSS - why not make the tabs just CSS? The radius CSS command would allow osCMax to set the top-left and top-right corners to be curved, a border of 1px solid black (or grey) would give the borders around the words (ie: WishList, Cart, My Account, and Contact Us), padding would expand the tabs a bit to make them larger, and if a gradient was wanted that can be done also via CSS. What I am seeing is part CSS and part images for the backgrounds and curved parts. Anyway - just an idea. My main question is - how do you move the tabs to the left side? Nothing I'm trying seems to work. :-/

    Thanks in advance for any help provided.

  2. #2
    markem
    Guest


    Default Re: Moving the tabs at the top of the web page to the left side of the page

    Got it! My problem was that I was changing too much (or too many things) at one time. The part that needs to be changed is:

    Code:
    #header li {
        float: left;
        background-image: url(images/tab_right.gif);
        background-repeat: no-repeat;
        background-position: right top;
        height: 23px;
        line-height: 23px;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding: 0;
        margin-right: 2px;
        }
    That is all that needs to be changed. If you change anything else it doesn't work. :-/

  3. #3
    Active Member
    Moving the tabs at the top of the web page to the left side of the page


    Join Date
    Sep 2009
    Location
    Vancouver, BC, Canada
    Posts
    486
    Contribute If you enjoy reading the
    content here, click the below
    image to support our site.
    Click Here To Contribute To Our Site

    Total Contributions For

    JRR     $ 180.00
    Rep Power
    70


    Default Re: Moving the tabs at the top of the web page to the left side of the page

    Do you mind explaining what you changed? I looked in catalog/admin/order_editor/css.php and catalog/templates/compromise/main_page.html (2.5.4) and could not find the script as you show it, all I found (in css.php) was:

    Code:
       #header li {
       display: inline;
       }
    Which is what I'm assuming you changed to the code above. Or did I miss a file?

    I should mention that I tried your suggestion above and can't see any obvious change in the Admin menu...

    Thanks!
    Last edited by JRR; 06-13-2015 at 04:15 PM.

  4. #4
    markem
    Guest


    Default Re: Moving the tabs at the top of the web page to the left side of the page

    If you go into the stylesheet.css file for your website and look for the BOF for the tabs on the index page you will find the above mentioned style.

    This is the one you DO NOT want:

    Code:
    /* TAB CODE FOR PRODUCT.INFO.TPL.PHP PAGE by PGM*/
    /*semantic tabs*/
    #tab1,
    #tab2,
    #tab3,
    #tab4,
    #tab5,
    #tab6 {
    Here is the code you DO want to look at:

    Code:
    /* BOF: Index Page Tabs - Dadionline */
    #header {
    	float: left;
    	width: 100%;
    	font-size: 93%;
    	line-height: normal;
    	}
    
    
    /* We do not want a margin */
    /* There is no padding and we do not want to display this as a bullet pointed list */
    /* We do not want to display this as a bullet pointed list */
    #header ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    
    
    /* Float all items left */
    /* background image for the tab */
    /* we do not want the background image to repeat */
    /* position the background image at the top left of the Tab */
    /* give the LI item an height of 40 pixels */
    /* give the LI item a line-height of 40 pixels. Line-Height ensures that the text appears in the centre (vertically) */
    /* We do not want a top margin */
    /* We do not want a bottom margin */
    /* We do not want a left margin */
    /* We do not want any padding */
    /* Add a 2 pixel margin to the right of each LI (Tab). Adds a 2 pixel gap between each tab */
    #header li {
    	float: left;
    	background-image: url(images/tab_right.gif);
    	background-repeat: no-repeat;
    	background-position: right top;
    	height: 23px;
    	line-height: 23px;
    	margin-top: 0;
    	margin-bottom: 0;
    	margin-left: 0;
    	padding: 0;
    	margin-right: 2px;
    	}
    Now! I reformatted the file to make it easier to look at. In the original stylesheet.css - everything is just strung out to the right from the beginning. This makes it hard to edit and/or find things. But if you look for that BOF line, the rest are just below it. Check your stylesheet against the above.

Similar Threads

  1. [Template System] product info page expands due to left column expansion (want to modify middle width)
    By MrE03 in forum Templating, CSS, Design
    Replies: 3
    Last Post: 09-04-2011, 04:36 PM
  2. Product description tabs flash on page load... what was that trick?
    By Luxoria in forum osCmax v2 Customization/Mods
    Replies: 5
    Last Post: 02-10-2011, 04:38 AM
  3. moving boxes to the header or footer, not left or right ?
    By Mythos in forum osCMax v2 Features Discussion
    Replies: 2
    Last Post: 05-19-2010, 11:42 PM
  4. Custom left hand side navigation
    By paulh1234 in forum osCommerce 2.2 Modification Help
    Replies: 0
    Last Post: 10-22-2004, 10:55 AM
  5. how do I make the left hand side boxes bigger?
    By jloyzaga in forum osCmax v1.7 Discussion
    Replies: 0
    Last Post: 10-15-2003, 03:10 AM

Tags for this Thread

Bookmarks

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
  •