Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9615

    How and where do you go to change this?

    to add a border, the color, the style,

    changing the current size of the box on thumbnails?

    the title size within the portfolio thumbnail box?

    this is all on the portfolio page “home page” where there is a grid of items

    Thank you.

    Also, can you change the top banner color or insert a background photo for the top banner (banner as in where the LOGO and links are located)?

    Similar question but reversed, how can I delete the footer completely? As of now I have no footer content and changed the color through the layout but there is a lot of space left.

    #65284

    HI Jessipoo,

    First, I think you would really benefit from trying out Firebug for Firefox: http://getfirebug.com . Generally, when we go to modify a css class (like for this) we’ll use Firebug or something like it to “Inspect” the css.

    So for what you are looking to change, lets take a look at: http://www.kriesi.at/themes/angular/

    The main page has the portfolio elements we are looking to change. I’ll open the site in Firefox and then right click on the little squirrel in the Happy Holidays portfolio item and select Inspect element with firebug.

    From the inspection window, you can see the img with its attributes, the canvas class beneath it to handle the greyscale-image etc. What we are looking for is what is effecting the border of the item. Moving up through the css I eventually find that the div class=”inner-entry” is responsible for the border around the items. In this case, its actually a box shadow giving the effect of a border.

    So what you would put into your custom.css or Quick CSS would be:

    .inner-entry{
    box-shadow: none;
    border-style: solid;
    border-width: 2px;
    border-color: #FF0000;
    }

    We get rid of the box shadow so that you can add a border then add attributes for the things we want to happen. Sorry if this comes off a little to pedagogical but I’ve noticed you are really digging in to customizing the theme and I thought this would help :)

    The title size:

    #top .portfolio-title{
    font-size: 15px;
    }

    Box size is done with the portfolio layouts (either 4,3,2,1). Once you start digging into changing them, you will probably run into issues with the display of the theme with smaller platforms.

    Footer:

    #footer{
    display:none;
    }

    Header:

    #header{
    background-color: #333
    }

    You can also apply a background-image to the header class.

    #65285

    Oh thanks. I’ve used chrome’s source page and then manually went up and down to figure out what I should be looking for, but actually chrome has an “inspect element” option when you right click on things. The code shows up and highlights the particular item you wanted to inspect. This will hopefully save me some time

    The problem however is sometimes, change requires more than one step or more than one modification in one or 2 files in which case, I wouldn’t know what to do.

    Yes thank you for breaking it down. I really want to be more empowered to make this theme my own.. and without breaking anything.

    .inner-entry{

    box-shadow: none;

    border-style: solid;

    border-width: 2px;

    border-color: #FF0000;

    }

    This adds a red line of thickness 2px around my portfolio item. I wanted to reduce the size of the white box that is above the images and holds the titles. Do I need to tamper with this?

    #65286

    found the answer to my question:

    http://www.kriesi.at/support/topic/portfolio-tiles-height#post-43214

    but the information you provided me will be useful as well since I will be able to customize my site even more.

    Thank you Devin.

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

The topic ‘Changing the border around the portfolio item on the portfolio page?’ is closed to new replies.