Keyword

How do you make the space between the picture and border on the front page smaller?

  • Oceanwatcher
  • Oceanwatcher's Avatar Topic Author
  • Offline
  • Elite Member
More
10 years 3 months ago #68111 by Oceanwatcher
Oceanwatcher created the topic: How do you make the space between the picture and border on the front page small
Around every picture there is a one pixel border and some whitespace (padding?). How do I make that space smaller?

Please Log in or Create an account to join the conversation.

More
10 years 3 months ago #68112 by Mario Marquardt
Mario Marquardt replied the topic: How do you make the space between the picture and border on the front page small
in the style.css from k2 find

/* Overrides to the Item View */
div.itemContainer {padding:4px;float:left;}
div.itemContainer div.itemHeader h1.itemTitle {font-family:Georgia, "Times New Roman", Times, serif;font-size:20px;font-weight:normal;color:#135CAE;padding:10px 0 24px 0;margin:0;}
div.itemContainer span.itemAuthor {float:left;width:40%;}
div.itemContainer ul.itemToolbar {float:right;width:58%;}
div.itemImageThumbBlock {float:left;}
div.itemImageThumbBlock span.itemImage {}
div.itemImageThumbBlock span.itemImage img {display:block;float:left;border:2px solid #aaa;padding:0;margin:4px 4px 0 0;}
div.itemImageMainBlock {padding:8px;margin:0 0 16px 0;/*display:none;*/}
div.itemImageMainBlock span.itemImage {display:block;text-align:center;margin:0 0 8px 0;}
div.itemImageMainBlock span.itemImage img {border:1px solid #ccc;padding:8px;}
div.itemImageMainBlock span.itemImageCaption {color:#666;float:left;display:block;font-size:11px;}
div.itemImageMainBlock span.itemImageCredits {color:#999;float:right;display:block;font-style:italic;font-size:11px;}
div.itemContainer div.itemIntroText {color:#444;font-size:inherit;font-weight:normal;line-height:normal;padding:4px 0 12px 0;}


than change padding at this line: div.itemImageMainBlock span.itemImage img {border:1px solid #ccc;padding:8px;}

P.S. Have a look at the "web developer tool addon" for firefox, with that tool you will find every thing very fast in css, also you can make live "prelook" changes on your website to see what happend when you change something und MUCH MORE OTHER THINGS, this is a must have addon for Firefox for Webdesigners, get it here:

addons.mozilla.org/de/firefox/addon/60

Please Log in or Create an account to join the conversation.

  • Oceanwatcher
  • Oceanwatcher's Avatar Topic Author
  • Offline
  • Elite Member
More
10 years 3 months ago #68113 by Oceanwatcher
Oceanwatcher replied the topic: How do you make the space between the picture and border on the front page small
Found it. Had to change a couple of more things to make it work the way I wanted it to work.

I started using Firebug a little while ago, but have not learnt all options yet. I had already found the area of style.css that I should work on, but was changing the wrong parameter/line, so I could not get it to work properly.

While I have your attention - I need the pictures of the secondary section to be left aligned with the text flowing around it ( so it appears that the text is to the right of the picture. I am trying to get the blocks set up like I have here (more or less):

www.datahverdag.com/joomla/index.php?option=com_magazine&Itemid=13

Link to the page I am working on is here:

www.datahverdag.com/joomla/

This is a project in heavy development. I am moving from WordPress to Joomla as WordPress became too limiting at a certain point. I have also set no access for search engines for this folder, so there is no harm in publishing the link here :-)

Please Log in or Create an account to join the conversation.

More
10 years 3 months ago #68114 by Mario Marquardt
Mario Marquardt replied the topic: How do you make the space between the picture and border on the front page small
try this in your k2 style.css


#itemsListSecondary .itemImageMainBlock {float: left;}

Please Log in or Create an account to join the conversation.

  • Oceanwatcher
  • Oceanwatcher's Avatar Topic Author
  • Offline
  • Elite Member
More
10 years 3 months ago #68115 by Oceanwatcher
Oceanwatcher replied the topic: How do you make the space between the picture and border on the front page small
Fantastic! I also added Display: none to the caption and credit on the frontpage.

It is starting to clean up quite a bit now!

Something is a bit strange though. At the end, there is supposed to be a list of links in two columns. What I have is a list of stories, similar to the primary. Is this correct?

Please Log in or Create an account to join the conversation.

More
10 years 3 months ago #68116 by Mario Marquardt
Mario Marquardt replied the topic: How do you make the space between the picture and border on the front page small
don't know yet, good question, will try it after coffee break

Please Log in or Create an account to join the conversation.

Moderators: william white

Powered by Kunena Forum