Portfolio page sidebar? « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Angular

Portfolio page sidebar?

14 posts from 6 voices

Started 1 year ago by mlah384
Latest reply from Mya
This topic is resolved

Tags:

mlah384
Member

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

Posted 1 year ago #
Devin
Moderator

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

Posted 1 year ago #
rita01
Member

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 !

Posted 7 months ago #
Ismael
Moderator
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
Posted 7 months ago #
rita01
Member

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 !

Posted 7 months ago #
rita01
Member

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 !

Posted 7 months ago #
Nick
Moderator

Hi,

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

Thanks,

Nick

Posted 7 months ago #
rita01
Member

Hi Nick,

Don't be sorry, your support rules !

That's exactly what I mean.

Big thanks

Posted 7 months ago #
Ismael
Moderator
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
Posted 7 months ago #
Nick
Moderator
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
Posted 7 months ago #
rita01
Member

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 ??).

Posted 7 months ago #
Nick
Moderator

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

Posted 7 months ago #

rita01
Member

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...

Posted 7 months ago #