Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 60
  • Last Modified:

tweaks to widgets on home page

http://screencast.com/t/g297G7bOhFN

How do I reduce space BETWEEN Home Bottom Widgets?
How do I change the LEARN MORE to the blue color that is like Home Middle?
0
nsitedesigns
Asked:
nsitedesigns
  • 10
  • 4
  • 3
7 Solutions
 
nsitedesignsAuthor Commented:
0
 
Terry WoodsIT GuruCommented:
The width of the widgets and the margin-right for the first one is set with:
.footer-widgets-1 {
    margin-right: 30px;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    width: 360px;
}

Open in new window


This is poorly written code as it's not responsive to the size of the window it's viewed in. Due to that problem, changing it may require changes to the above code, plus other changes. Modern web design more commonly has width as a % rather than a fixed pixel value. eg 33% or 32% for 3 widgets, with a little left over to allow some margins.

Anyway, you can override style of a theme without editing the theme itself (or needing a child theme) by using a CSS plugin like "My Custom CSS" or "Simple Custom CSS".

Are you familiar with how to use dev tools in Chrome to play with the style of the page while you view it?
0
 
Terry WoodsIT GuruCommented:
For the Learn more text, add this to your custom css:

.home-bottom a.more-link, .home-middle a.more-link, .home-top a.more-link {
    color: #468096;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Terry WoodsIT GuruCommented:
By the way, there isn't a margin-right for the middle widget. Instead, the right widget is floated right, and the middle one is spaced by the margin-right for the left widget.
0
 
ResQTek NancyPresident @ ResQTekCommented:
.content .home-bottom .featured-content .entry, .sidebar .featured-content .entry {
    border-bottom: none;
   margin-bottom: 0 !important; /* i added this */
}

p {
   margin: 0; /* i changed this */
    padding: 0;
}

I added !important to the color of the .more-link element like this:     color: #46809b !important;


** edit: sorry for cross-posting, I was editing at the same time as the previous expert **
0
 
nsitedesignsAuthor Commented:
Sorry was out sick...

Let me take a look at what you wrote.
0
 
nsitedesignsAuthor Commented:
Terry,  I tried entering your code in the custom css plugin but it didn't do anything with changing the color.  I cleared cache and viewed in private browser.   When I changed it and inspected the element, it did display fine but there is a line through the color so something is overwriting  it and making it black.   See screen shot
http://screencast.com/t/O3kxRXM7cH
0
 
nsitedesignsAuthor Commented:
Nancy,

I put the important by the Learn more link and that fixed it but the code to remove the excess padding didn't work.  : (
0
 
ResQTek NancyPresident @ ResQTekCommented:
That issue seems to be caused by this property:

.entry-content ol, .entry-content p, .entry-content ul, .quote-caption {
    margin-bottom: 26px;
}
0
 
nsitedesignsAuthor Commented:
I looks like the culprit might be the entry-content but when I removed padding from the bottom noting happened.

http://screencast.com/t/NiNCKLIrs
0
 
nsitedesignsAuthor Commented:
Nancy,

Sorry, our paths crossed.  I did put in the code you provided for bumping up the Learn More.
.entry-content ol, .entry-content p, .entry-content ul, .quote-caption {
    margin-bottom: 26px;
} 

Open in new window


That did help close the gap but it still looks weird to me.  Is  there a way to "easily" put the learn more after the text?  Seems funky to have it sit so low below the image.  Or, would that require an act of Congress?  LOL  See screen shot.
http://screencast.com/t/bPdmvRE98wK
0
 
nsitedesignsAuthor Commented:
Terry,

Your suggestion to replace px with %  fixed the funky floating didn't seem to work.

I set margin-right to "0" and set width to 33%.

OLD CODE
.footer-widgets-1 {
    margin-right: 30px;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    width: 360px;
}

Open in new window


NEW CODE
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
    width: 33%;
}


.footer-widgets-1 {
  margin-right: 0px;}

Open in new window

0
 
ResQTek NancyPresident @ ResQTekCommented:
.home-bottom a.more-link, .home-middle a.more-link, .home-top a.more-link {
    clear: both;  /* remove this */
    color: #222;
   display: block; /* remove this */
    font-size: 14px;
    padding: 8px 0px;
    text-align: left;
    text-decoration: underline;
}
0
 
nsitedesignsAuthor Commented:
I think I fixed this I futzed with the settings in the widget and it is looking better.  Here is what I did:

Increase the amount of text to display
Pushed image to the right

Simple yet effective!
0
 
nsitedesignsAuthor Commented:
p.s.  I searched in the css for .home-bottom a.more-link and there were no results....
0
 
ResQTek NancyPresident @ ResQTekCommented:
If you're using the Simple Custom CSS plugin, it's in there.
0
 
nsitedesignsAuthor Commented:
Thanks all!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 10
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now