Solved

tweaks to widgets on home page

Posted on 2016-09-15
17
55 Views
Last Modified: 2016-09-22
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 4
  • 3
17 Comments
 

Author Comment

by:nsitedesigns
ID: 41800667
0
 
LVL 35

Assisted Solution

by:Terry Woods
Terry Woods earned 250 total points
ID: 41800691
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
 
LVL 35

Assisted Solution

by:Terry Woods
Terry Woods earned 250 total points
ID: 41800696
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
 Database Backup and Recovery Best Practices

Join Percona’s, Architect, Manjot Singh as he presents Database Backup and Recovery Best Practices (with a Focus on MySQL) on Thursday, July 27, 2017 at 11:00 am PDT / 2:00 pm EDT (UTC-7). In the case of a failure, do you know how long it will take to restore your database?

 
LVL 35

Assisted Solution

by:Terry Woods
Terry Woods earned 250 total points
ID: 41800698
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
 
LVL 6

Accepted Solution

by:
ResQTek Nancy earned 250 total points
ID: 41800704
.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
 

Author Comment

by:nsitedesigns
ID: 41808929
Sorry was out sick...

Let me take a look at what you wrote.
0
 

Author Comment

by:nsitedesigns
ID: 41808959
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
 

Author Comment

by:nsitedesigns
ID: 41808974
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
 
LVL 6

Assisted Solution

by:ResQTek Nancy
ResQTek Nancy earned 250 total points
ID: 41808981
That issue seems to be caused by this property:

.entry-content ol, .entry-content p, .entry-content ul, .quote-caption {
    margin-bottom: 26px;
}
0
 

Author Comment

by:nsitedesigns
ID: 41809003
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
 

Author Comment

by:nsitedesigns
ID: 41809014
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
 

Author Comment

by:nsitedesigns
ID: 41809031
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
 
LVL 6

Assisted Solution

by:ResQTek Nancy
ResQTek Nancy earned 250 total points
ID: 41809050
.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
 

Author Comment

by:nsitedesigns
ID: 41809747
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
 

Author Comment

by:nsitedesigns
ID: 41809759
p.s.  I searched in the css for .home-bottom a.more-link and there were no results....
0
 
LVL 6

Assisted Solution

by:ResQTek Nancy
ResQTek Nancy earned 250 total points
ID: 41810941
If you're using the Simple Custom CSS plugin, it's in there.
0
 

Author Closing Comment

by:nsitedesigns
ID: 41811071
Thanks all!
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question