WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] colorway lite-move sidebar from right to left (5 posts)

  1. MariaWeb
    Member
    Posted 1 year ago #

    Hi I've been trying to use the custom css in the theme options to move the sidebar from right to left. I've seen many of discussions and tried finding and putting css in custom css.
    my sites css:
    http://fagform.is/wp-content/themes/colorway/style.css

    .sidebar {
    margin-top: 30px;
    margin-right: 30px;
    border-left: 1px solid rgb(238, 238, 238);
    padding-left: 20px;
    margin-bottom: 20px;
    }

    xtra:
    .omega {
    margin-right: 0px;
    }

    ===Also ... when I was trying to figure the code out and messing with the inspect element(firefox) I managed to make it go to the other side but didn't save. So I know it's possible some how in this theme

  2. MariaWeb
    Member
    Posted 1 year ago #

    it is posible to in the inspect element to make it go to the left by editing the code below to float: right; to float: left;
    but it doesn't work in the custom css. it only moves the sidebar to the bottom(in the custom css i changed it to float: left !important;).

    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
    display: inline;
    float: right;
    margin-left: 5px;
    }

    appreciate if someone would reply :)

  3. paulwpxp
    Font hero
    Posted 1 year ago #

    This one is very difficult one. It's equivalent to hacking the responsive grid framework. Not even to mention that the list styling inside the sidebar has to be reworked too.

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    Not thoroughly tested.

    /*-----begin switch content and sidebar-----*/
    
    @media only screen and (min-width: 767px) {
    
    	.grid_16.alpha {
    		float: right;
    		margin-left: 5px;
    		margin-right: 0;
    	}
    
    	.grid_16.alpha .content-wrap {
    		margin-left: 0;
    		margin-right: 30px;
    		padding-right: 0;
    		padding-left: 5px;
    	}
    
    	.grid_8.omega {
    		margin-left: 0;
    		margin-right: 5px;
    	}
    
    	.grid_8.omega .sidebar {
    		border-left: 0 none;
    		border-right: 1px solid #EEEEEE;
    		margin-left: 30px;
    		margin-right: 0;
    		padding-left: 0;
    		padding-right: 20px;
    	}
    
    	.grid_8.omega .sidebar ul {
    		margin: -5px -30px 15px -5px;
    	}
    
    	.grid_8.omega .sidebar li {
    		margin-left: 0;
    		margin-right: 10px;
    		padding-left: 0;
    		padding-right: 20px;
    		text-align: right;
    	}
    
    	.grid_8.omega .sidebar ul li:hover {
    		background: #ffffff; /* Old browsers */
    		background: -moz-linear-gradient(left, #ffffff 0%, #f8f8f8 100%); /* FF3.6+ */
    		background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#f8f8f8)); /* Chrome,Safari4+ */
    		background: -webkit-linear-gradient(left, #ffffff 0%,#f8f8f8 100%); /* Chrome10+,Safari5.1+ */
    		background: -o-linear-gradient(left, #ffffff 0%,#f8f8f8 100%); /* Opera 11.10+ */
    		background: -ms-linear-gradient(left, #ffffff 0%,#f8f8f8 100%); /* IE10+ */
    		background: linear-gradient(to right, #ffffff 0%,#f8f8f8 100%); /* W3C */
    	}
    
    }
    
    /*-----end switch content and sidebar-----*/
  5. MariaWeb
    Member
    Posted 1 year ago #

    thank you Paulwpxp!
    it worked!!! :D your awesome! thanks again :)

Topic Closed

This topic has been closed to new replies.

About this Topic