Recent
Categories
View Replies (7)

Spacing in Stockholm template

  1. Issue
0
Votes
Undo
  1. OldRock
    OldRock
  3. Commercial Templates
  4. Monday, 28 May 2018
  5.  Subscribe via email
Hi,

Could you please provide CSS for the Stockholm template to reduce the spacing around (or within, as noted) the following, primarily for vertical spacing:
- J51_Slideshow Module
- Search module
- Base modules
- Articles
- Buttons (within the button, around the text)
- Drop-down menu items (vertical and horizontal spacing)
- Vertical menu items in sidecol-a

I've tried all of the following (picked up from other forum advice) without success:

.module_margin, module_padding {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
!important;
}
#hornav ul ul li a {
padding: 4px 12px;
}
#container_top1_modules, #container_top2_modules,
#container_top3_modules, #container_main,
#container_bottom1_modules, #container_bottom2_modules,
#container_bottom3_modules, #container_base,
#container_copyright {
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
padding: 0
!important;
}
.button_margin, button_padding { margin: 0 0 0 0; padding: 0 0 0 0;
!important;
}

Thanks for your help
Graeme
Responses (7)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your listed modules?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
OldRock
OldRock
Accepted Answer Pending Moderation
0
Votes
Undo
http://www.londonderryumc.org/z-Joomla3/
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend you can add the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS) which will go a long way in removing content padding....

.sidecol_block .module_surround,

.module .module_surround,

.module_menu .module_surround,

.wrapper_contenttop {

    padding: 0;

}

.module:first-of-type .module_surround {

	padding-top: 0;

}

.sidecol_block,

.block_holder {

    padding: 0 15px;

}

.maincontent {

    padding: 15px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
OldRock
OldRock
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Ciarán, it looks a lot better now.

There are a couple of others I'd like to reduce but the only one that really matters now is the width of the top menu drop down column. It is much larger than necessary, and the result is that the second level drop down for the right-most menu item is lost off the edge of the screen (see below). Can the background width of the drop-down be reduced?

Is there somewhere that I can look to find the names for these types of CSS entries? The other two that I'd like to achieve are as follows, but I can live without these if I'm asking too much!
- Is it possible to reduce the size of the "read more" buttons?
- Is there a way to reduce the spacing between the menu items in the side column?

Thanks again,
Graeme

Menu_cutoff.jpg
Attachments (1)
Menu_cutoff.jpg Menu_cutoff.jpg
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Graeme

To reduce the width of you dropdown you can also add the following custom CSS (edit to taste)...

.hornav li ul, .hornav li ul li ul {

    min-width: 175px;

}

.hornav li ul li:hover > ul {

    left: 160px;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
For the buttons you can also add the following.,..

.btn, .button {

    padding: 8px 12px;

    font-size: 14px;

}


And for the sidebar menu...

.module .module_surround .module_content ul li a, 

.module_menu .module_surround .module_content ul li a {

    padding: 2px 0;

}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 6
OldRock
OldRock
Accepted Answer Pending Moderation
0
Votes
Undo
Excellent - thank you for your patience. Great support!
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.