Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #11142

    How do you add a sidebar to the portfolio single item pages?

    #70703

    Hi mlah384,

    The theme doesn’t support adding sidebars to all portfolio items through the admin. You would need to re-do the theme files for the single portfolio and adjust some of the css as well.

    Regards,

    Devin

    #70704

    Hi,

    No way to have any little help to do this customisation please (just a clue…) ? I have changes all the css to have this result :

    http://lacroiseedeschemins.ma/catalogue/

    But I finally understand that the portfolio single page’ s content is into the sidebar. So now my portfolio single page are not good. There will be more than 500 items on this site so I would like it to be nice :)

    Thank you !

    #70705

    Hi,

    Actually you need to add this first on your custom.css

    .single-portfolio .fullwidth .sidebar {
    display: block;
    }

    You can now add get_sidebar() on loop-portfolio-single.php. You might need to do some coding to place it in the right position, sidebars are usually four units in width. :)

    Regards,

    Ismael

    #70706

    Hi,

    I got it, thank you very much !

    Last but not the least pleeeease. Now I have the description under the little slider, I would like it to be aligned right but I can’t :

    http://lacroiseedeschemins.ma/parutions/tete-de-poivre/

    Into loop-single-portfolio I moved the description from four-unit to eight-unit and added sidebar into four-unit container, with little css custom toreduce the slider.

    Thank you again Ismael !

    #70707

    Precision, I would like the slideshow to be aligned left or right and the description (titre, auter, edition etc…) aligned next to it.

    Thank again !

    #70708

    Hi,

    I am sorry, do you mean something like this? http://i.imgur.com/HcvXw.png

    Thanks,

    Nick

    #70709

    Hi Nick,

    Don’t be sorry, your support rules !

    That’s exactly what I mean.

    Big thanks

    #70710

    Hi,

    You might want to do what you did on the sidebar again. By adding a four unit div, first the slider

    <?php echo $slideHtml; ?>

    and for the title and portfolio-meta-list

    echo "<div class='four units'>";
    echo "<h1 class='post-title portfolio-single-post-title'>".get_the_title()."</h1>";

    $meta = avia_portfolio_meta(get_the_ID());
    if($meta)
    {
    echo avia_advanced_hr(false, 'small');
    echo $meta;
    }

    Since you managed to put them inside <div class=”eight units alpha min_height_1″>, I’m sure you can enclose them on a four units div. :)

    Regards,

    Ismael

    #70711

    Hi,

    This will have to be a two step process since it will take me too long to recreate on my localhost your exact setup. First we are gonna move the slider which will screw up the page , and at that point we need to change the css to un-screw up the page.

    1) Please open up loop-portfolio-single.php located in the /includes/ directory. Make a backup copy of the page first, so if anything goes wrong you can quickly fix it by replacing the file we are working on.

    2) Look for the following code on line 28 and delete it. Please make sure that the code looks identical to the line below

    <?php echo $slideHtml; ?>

    3) In the same file go to line 52 which should look like

    //display the actual post content

    Paste the code below **BEFORE** the code above on line 51

    echo $slideHtml;

    so now your lines 51-52 would look like

    echo $slideHtml;
    //display the actual post content

    Save and close the file.

    Part II

    Add the following to Quick CSS in the backend:

    #top.single-portfolio .slideshow_container {
    float: right;
    }

    Please keep a careful record of all modifications made to files since when you update the theme, all modifications will be overwritten. QuickCSS modifications however are not overwritten during updates.

    Thanks,

    Nick

    #70712

    Cooooool Nick !

    Thank you very much for this f****** support !

    I just had to add this to the custom css :

    #top .portfolio-meta-list {

    padding-right: 220px;

    float: left;

    }

    To let the slider goes top.

    You rock !

    I would like to share here my all quick css file but I don’t know how to use code into the forum (backtick ??).

    #70713

    Hi,

    You can use the single quote (the single quote on same key as the ~ symbol above the tab) to begin the code and end it,

    @Ishmael didn’t see your answer when I started.

    Thanks,

    Nick

    #70714

    Ok, thank you Nick, and thank you Ismael too ! I don’t have backticks on my french keyboard.

    So here is my custom css ( reducing header, customising preview title and images, custom menu css, searchbar with socials, sidebar with portfolio preview and single portfolio, reducing slider single portfolio, changing thumbnails and more…) :

    #header {
    margin-bottom: 25px;
    }

    #header .container {
    min-height: 50px;
    padding: 20px 0px;
    border-bottom: 1px solid;
    z-index: 100;
    }

    .hr {
    clear: both;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 25px;
    line-height: 25px;
    position: relative;
    margin: 0px;
    padding: 17px 0px;
    }

    #top .callout {
    padding: 5px 0px;
    }

    .template-blog .content {
    margin-top: 10px;
    }

    .title_container, #top .dynamic_el_1 .title_container {
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    clear: both;
    }
    /*********police widget menu perso sidebar****/
    .widget_archive li a, .widget_categories li a, .widget_pages li a, .widget_links li a, .widget_meta li a, .widget_nav_menu li a{
    font-size: 13px;
    }

    /*********separations menu perso sidebar****/
    .widget_nav_menu a{
    display: block;
    padding: 0px 0px 0px 08px;
    border-top-style: solid;
    border-top-width: 0px;
    }
    .widget {
    clear: both;
    position: relative;
    overflow: hidden;
    padding: 15px 0px;
    float: none;
    }

    #top .news-content {
    padding: 3px 0px 3px;
    line-height: 18px;
    position: relative;
    overflow: hidden;
    font-size: 11px;
    display: block;
    clear: both;
    margin: 0px;
    }
    /********* titre portfolio item plus large ****/
    .portfolio-size-4 .post-title.portfolio-title {
    height: 32px;
    }
    #top .portfolio-title{
    padding:10px;
    margin:0;
    font-family: Arial, "Georgia", "Times New Roman", Helvetica, sans-serif;
    font-weight: normal;
    font-style: bold;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    }
    /********* tiré titre portfolios ****/
    .title-span {
    height: 0px;
    width: 0px;
    position: absolute;
    top: 49%;
    left: 11px;
    }

    /********* MAIN MENU ****/
    .main_menu ul:first-child > li > a{
    display:block;
    text-decoration: none;
    margin-left:30px;
    padding:3px 15px 3px 15px;
    text-transform: uppercase;
    border-bottom: 2px solid;
    -moz-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1;
    }
    /*********SOUS MENU ****/
    .main_menu .menu ul {
    display: none;
    left: 15px;
    position: absolute;
    top: 31px;
    width: 192px;
    z-index: 2;
    cursor: pointer;
    border-top: 2px solid;
    -moz-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    /*********POLICE EN TETE TITRES ****/
    .title_container h1, #top .dynamic_el_1 .title_container h1{
    margin:0;
    font-weight: normal;
    font-size: 35px;
    padding:11px 340px 12px 0;
    position: relative;
    }
    /*********aperçu livre avec sidebar****/* Base Grid */
    .container .one.unit { width: 50px; }
    .container .two.units { width: 130px; }
    .container .three.units { width: 210px; }
    .container .four.units { width: 210px; }
    .container .five.units { width: 370px; }
    .container .six.units { width: 450px; }
    .container .seven.units { width: 530px; }
    .container .eight.units { width: 690px; }
    .container .nine.units { width: 690px; }
    .container .ten.units { width: 770px; }
    .container .eleven.units { width: 850px; }
    .container .twelve.units { width: 930px; margin-left:0}

    /*********marge gauche sidebar****/
    .inner_sidebar{
    padding-left:5px;
    }

    /*********aperçu livre avec sidebar****/
    .sidebar_right .ajax_slide .portfolio-entry.one_third, .sidebar_left .ajax_slide .portfolio-entry.one_third{
    width:70%;
    margin-left:20px;
    margin-top:0px;
    }

    .sidebar_right .ajax_slide .flex_column.two_third, .sidebar_left .ajax_slide .flex_column.two_third{
    width:26%
    }

    /* Columns for better content separation
    ============================= */

    div .one_fifth { overflow: hidden; margin-left: 4%; width:16.5%; float:left; position:relative; }
    div .one_fourth { overflow: hidden; margin-left: 4%; width:22%; float:left; position:relative; }
    div .one_third { overflow: hidden; margin-left: 4%; width:51.5%; float:left; position:relative; }
    div .two_fifth { overflow: hidden; margin-left: 4%; width:38.5%; float:left; position:relative; }
    div .one_half { overflow: hidden; margin-left: 4%; width:48%; float:left; position:relative; }
    div .three_fifth { overflow: hidden; margin-left: 4%; width:57%; float:left; position:relative; }
    div .two_third { overflow: hidden; margin-left: 4%; width:34.5%; float:left; position:relative; }
    div .three_fourth { overflow: hidden; margin-left: 4%; width:74%; float:left; position:relative; }
    div .four_fifth { overflow: hidden; margin-left: 4%; width:79%; float:left; position:relative; }
    .msie7 .one_fourth { width:21.5%; }

    /*********SEARCHBAR EN HAUT DE PAGE ****/
    .social_container #searchform{
    position: absolute;
    right: 94px;
    top: 3px;
    z-index: 160;
    }

    #s {
    width: 160px;
    padding: 10px 40px 10px 10px;
    position: relative;
    margin: 0px;
    }

    /*********reduire images SINGLE PORTFOLIO****/
    .single .slideshow.fade_slider,
    .single .slideshow li img {
    width: 200px!important;
    }
    .single .slideshow.fade_slider {
    background: none!important;
    }

    /*********SIDEBAR POUR SINGLE PORTFOLIO****/

    .single-portfolio .fullwidth .sidebar {
    display: block;
    }

    /*********aligner slideshow à droite****/

    #top.single-portfolio .slideshow_container {
    float: right;
    padding-right: 20px;
    padding-bottom: 0px;
    }

    /*********réduire le bloc de description pour laisser monter le slideshow****/

    #top .portfolio-meta-list {
    float: left;
    padding-right: 110px;
    padding-bottom: 0px;
    }

    /********* baisse portfolio item catalog ****/
    .ajax-control {
    height: 42px;
    right: 2px;
    top: -41px;
    }

    Hope it will help someone.

    the result here :

    http://lacroiseedeschemins.ma

    Everything is OK except the responsive layout for mobiles…

    #70715

    Hi rita01,

    Just to be sure before I close this thread, do you need help with the mobile layouts?

    Regards,

    Mya

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Portfolio page sidebar?’ is closed to new replies.