A few tweaks and adjustments to my site.. « Support Forum | Kriesi.at

Support Forum » Display

A few tweaks and adjustments to my site..

17 posts from 4 voices

Started 2 years ago by brobins
Latest reply from James Morrison
This topic is not a support question

Tags:

No tags yet.

brobins
Member

Hi Kriesi!

Firstly, thank you for producing such a great theme with a really user friendly admin panel for making my life so much easier :) Thumbs up!

I am not having any problems as such but would sure love to know how I can make these simple tweaks to my site to make it better suited for my needs..

Ok, first of all I want to change my 'Portfolio' page (http://www.benrobins.com/projects/). What I would like is to display the thumbnails and the project heading link underneath but to tidy it up a bit I would like to remove all the text and 'read more' link so that the user must click on the project title link to access the actual project page! How would I go about achieving this?

Another thing I think would be a really nice touch would be to have a slight border around the thumbnails and a hover over? See: (http://www.willelliottcgi.com/blog/?page_id=8)

I would also like to decrease the space in between the thumbnails so that they sit slightly closer together, is this possible?

Ok, my next idea is for the actual individual project pages. See: (http://www.benrobins.com/fiat-uk-online-configurator/) for example..

What I want to do is remove the sidebar and physically change the template for a 'blog' so that it is full page!? I would also like to remove all comment features on these pages..

I hope all these things can be achieved, I am sure they will be able to somehow :P

I don't mind rolling up my sleeves to do this but am hoping you can really help me out to make my personal site really kick ass! :)

Cheers mate!

Posted 2 years ago #
James Morrison
Former Team Member
1.) To remove all content from the Portfolio gallery except the image, open up template_portfolio.php find this code:
```
<h3 id="post-<?php the_ID(); ?>"><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
				<?php the_excerpt(); // small excerpt of the post content ?> 

				<a href="<?php echo get_permalink(); ?>" class="more-link">Read more</a>
```
and delete it.

2.) To add a border you need to edit some CSS and change the size of the image slightly.

Open up template_portfolio.php and find this code:
```
$preview = kriesi_build_image(array('url'=>$preview,
													'height'=> '124',
													'width'=> '280',
													'lightbox'=>$lightbox,
													'link'=>$link,
													'link_url'=>$link_url
													));
```
change it to:
```
$preview = kriesi_build_image(array('url'=>$preview,
													'height'=> '114',
													'width'=> '270',
													'lightbox'=>$lightbox,
													'link'=>$link,
													'link_url'=>$link_url
													));
```
Next, open up style.css and add this code to the end of the file:
```
.portfolio_entry img a { padding: 4px; border: 1px solid #AAAAAA; background-color:#FFFFFF; }
.portfolio_entry img a:hover { border: 1px solid #E28704; background-color: ED9F2F;}
```
This is just a guide and you could change the colours if Orange isn't your thing.

3.) To reduce the space between the images, edit this CSS code to reduce the margin-right (around line 328):
```
.box {
float:left;
margin-right:50px;
overflow:hidden;
padding-bottom:10px;
position:relative;
}
```
Bear in mind whatever you reduce it by affects the whole layout so you might want to readjust the size of the boxes and images. To change the box size, edit this CSS (around line 340):
```
.wrapper .box_small {
width:280px;
}
```
To change the image size see step 2 above.

4.) To remove comments, see this post: http://www.kriesi.at/support/topic/remove-post-info The code isn't exactly the same but the principal is. To make the Blog full width, open up template_blog.php and change this:

$k_option['custom']['bodyclass'] = "";

to this:

$k_option['custom']['bodyclass'] = "class='fullwidth'";

Have a look at template_fullwidth.php if there are layout issues, the code is all there to get Full Width just right.
Posted 2 years ago #
brobins
Member

Wow man, thanks for the help! Much appreciated!!

I have done a bit of playing and am now really happy with the spacing between the mini display boxes on the main page. See: (www.benrobins.com) The spacing in between each box to the right and bottom is perfect!

This however has raised another problem.. Now the boxes are all over to the left.. What I really would like to do is have all the boxes centered but retain the same spacing as it is now. Is this possible?

The same also applied to the portfolio page. Also, I have noticed that there is a larger gap at the bottom of each portfolio box on the portfolio page than there is on the main page. How can I alter this so they are consistent?

Really appreciate your help!!

Many Thanks

Posted 2 years ago #
James Morrison
Former Team Member
I did mention above that this would happen:

Bear in mind whatever you reduce it by affects the whole layout so you might want to readjust the size of the boxes and images.

To change the box size, edit this CSS (around line 340):
```
.wrapper .box_small {
width:280px;
}
```
You can also adjust the images sizes - look at step 2 above and change the width and height in the code example.
Posted 2 years ago #
brobins
Member

Edit!

I think I have done what I wanted!! :)

One thing I do need to do now is to add a bit more space at the bottom of the slider AND resize the info text graphic to fit the new site size..

Also, I have added the mentioned lines of code into the CSS:

backticks
.portfolio_entry img a {
padding: 4px; border: 1px solid #AAAAAA; background-color:#FFFFFF; }

.portfolio_entry img a:hover
{ border: 1px solid #E28704; background-color: ED9F2F;}
backticks

But this does not seem to be having any effect? See: http://www.benrobins.com/projects/

Its really looking really good now though :) A few minor tweaks and its done!

Posted 2 years ago #
James Morrison
Former Team Member

Hi!

Where did you add the CSS code? It doesn't show up in Firebug for me.

Best regards,
James

Posted 2 years ago #

brobins
Member

Hi!

In style.css, at the very bottom I have added the following using the wordpress Editor..

.portfolio_entry img a {
padding: 4px; border: 1px solid #AAAAAA; background-color:#FFFFFF;
}

.portfolio_entry img a:hover {
border: 1px solid #E28704; background-color: ED9F2F;
}

Posted 2 years ago #

James Morrison
Former Team Member

Sorry, I made a mistake and got the img and a the wrong way around. It should look like this:

.portfolio_entry a img {
padding: 4px; border: 1px solid #AAAAAA; background-color:#FFFFFF;
}

.portfolio_entry a:hover img {
border: 1px solid #E28704; background-color: ED9F2F;
}

Let me know if this works ok.

Posted 2 years ago #

brobins
Member

Ahh! Thank you so much! :-)

I have noticed that if I increase the size of the hover border to be larger than 1px the thumbnails slightly shift their position when you roll over them. Is this happening for any particular reason and can it be stopped?

Many Thanks!!!

Posted 2 years ago #
James Morrison
Former Team Member
If you want to increase the size of the border, you need to decrease the padding by the same value you increase the border by.

This code would not affect the layout on hover:
```
.portfolio_entry a img {
padding: 4px; border: 1px solid #AAAAAA; background-color:#FFFFFF;
}

.portfolio_entry a:hover img {
padding: 3px; border: 2px solid #E28704; background-color: ED9F2F;
}
```
Posted 2 years ago #
brobins
Member

Great!! Thank you so much! It makes the site feel so much more interactive now!! I have also added this to the front page!!

Hey, any update on how to add a bit more space at the bottom of the slider and before the info text?

Many Thanks!!!

Posted 2 years ago #
James Morrison
Former Team Member

Hi!

You can adjust the spacing by adding this to the end of your style.css file:

`#infotext { margin: 10px 0 0; }

Just adjust 10px to the size of the gap you'd like.

Regards,
James

Posted 2 years ago #
JoelAnthony
Member

I am trying to decrease the space between the portfolio images, but the above directions do not seem to work. I had been instructed before to add this code to the bottom of style.css to fix the 3 main columns on the home page:

.box1{
margin-right: 0px;
}

.box2, .box3{
margin-right: 50px;
}

Now this seems to control both the 3 main column buttons and the portfolio images. Any way to decrease the portfolio box spacing without it effecting the main page buttons?

Posted 2 years ago #
JoelAnthony
Member

I am trying to get my portfolio page to look like this: http://hopecentral.com/worship-media/sermons/

Posted 2 years ago #
Dude
Dude
Yes,
just append the class "portfolio_entry" like:
```
.portfolio_entry .box1{
margin-right: 0px;
}

.portfolio_entry .box2, .box3{
margin-right: 50px;
}
```
and add this code to style.css. However - be aware that this site: http://hopecentral.com/worship-media/sermons/ doesn't use the normal portfolio layout but just a link list with special styling. Maybe you want to contact the site owners to ask them for more fdetails (css code, template, etc.).
Posted 2 years ago #
JoelAnthony
Member

Thank you, good info.

Posted 2 years ago #
James Morrison
Former Team Member

Hey,

No problem, let us know if you have any other questions!

James

Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.

Kriesi.at - Wordpress Themes and HTML Templates

A few tweaks and adjustments to my site..

Reply

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…