Forum Replies Created
-
AuthorPosts
-
CleanPageDom
ParticipantHi there
The text in the list is aligned left, but any .entry-content ul or .entry-content ol has a 40px left margin.
In
style.css
you're looking for:.entry-content ol, .entry-content ul { margin-left: 40px; }
You can either make it smaller (eg 20px) or make it 0, but then the bullets may be too far left for your liking.
Dom
CleanPageDom
ParticipantHi Jason
Just messing around in Inspect Element, it looks like you can float the
entry-content p
to the right and then set a % width, although you'd need to do a bit of tinkering in the media queries to reset it to get it to behave on tablet/mobile.You'd also need to specify the blog page template, rather than just setting a width on
entry-content p
or you'd end up with weird text on all of you pages/posts.Something like:
.page-template-page_blog .entry-content p { float: right; width: 46%; }
Thanks
Dom
October 7, 2015 at 5:43 am in reply to: Metro Theme: Header Image is too big for the crop size #167588CleanPageDom
ParticipantHi there
The dimensions for the header image are set in the functions.php file.
(This is from Centric Pro as that's what I'm working in now, but the principle is the same):
//* Add support for custom header add_theme_support( 'custom-header', array( 'header-selector' => '.site-title a', 'header-text' => false, 'height' => 80, 'width' => 360, ) );
You need to edit those dimensions to match your image. Then you'll need to make some CSS tweaks. In the style.css, there will be some
min-height: 80px
settings. You need to set these to the height of your updated header image.Looking at Centric Pro, they are
.site-header .wrap
and.header-image .site-title > a
- although there may be others in Metro.Thanks
Dom
CleanPageDom
ParticipantSorry, ignore me. Hadn't looked at the settings properly. Just unticked the "Show Page Title" added it as the widget title and styled that in the CSS.
We can mark this as resolved!
Thanks
Dom
CleanPageDom
ParticipantHey there
Sorry for not getting back sooner. This worked perfectly. Much appreciated.
Dom
CleanPageDom
ParticipantHi there
Thanks for the help. This removes the button as well, though. Can I adapt that in some way to include a link to the relevant post? So, for example, the first on the list would be:
"Weekday Entry & Meal Deal £6
Get The Deal"I just want to get rid of that initial "..." which I guess is added to the end of the excerpt.
Dom
CleanPageDom
ParticipantOK, try this.
Go bakc to the
media only screen and (max-width: 1023px)
instyle.css
Where I told you to:
.site-header .widget-area { width: 20% }
Change to:
.site-header .widget-area { float: none; width: 100%; }
Leave the padding as is. It's working for me in the Chrome emulator. See how it goes on the live site. If it doesn't quite work, then we can play with
position: relative
and go at it from that way.Sorry for the mix-up.
Thanks
Dom
CleanPageDom
ParticipantSorry for the delay. Just looking into it now. It's because I told you to reduce the width of the widget area. May have to take a different approach.
Dom
CleanPageDom
ParticipantYou need to change a couple of lines in your media queries in
style.css
.Look for
@media only screen and (max-width: 1023px)
The reason the hamburger is jumping below the site title is because at 1023px and below, the right header widget resizes to 100%, so look for:
.content, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .minimum-landing .site-inner, .sidebar, .site-header .widget-area, .site-tagline-left, .site-tagline-right, .title-area { width: 100%; }
Below that, add:
.site-header .widget-area { width: 20% }
If you want to keep your code a little neater, remove
.site-header .widget-area
from the first list.Then you need to add some padding to the widget-area, otherwise it will sit right at the top of the screen. So find
.site-header .widget-area { padding: 0 5%; }
Change this to:
.site-header .widget-area { padding: 17px 5% 0; }
You can experiment with the
17px
.Hope that helps.
Thanks
Dom
CleanPageDom
ParticipantHi there
One way you can do it (and I've only just checked this on my portfolio, but I would guess it applies to all WordPress sites) is:
Go to the relevant page and view the source code (in Chrome, right-click > View Page Source). You should get a new window with the page's raw code.
If you do a find (apple + f on a Mac - not sure on a PC, sorry). Search for "postid" - if you find that, its'a post. If not, it's a page (you can double-check by searching for "page_id").
Thanks
Dom
CleanPageDom
ParticipantHi there
The dashed border in the example site is done with:
border-top: 1px dashed #f1f1f1;
So you'd need to add this wherever you felt necessary (such as in
.entry-content {}
). It wouldn't affect responsiveness if you just didborder-top/border-bottom
.It would depend which areas within the body you were trying to target as to how you'd go about that, but I suppose you could add something below an image, like this:
.entry content img { border-bottom: 1px dashed #f1f1f1; }
Thanks
Dom
CleanPageDom
ParticipantYou need to add
padding
to.title-area
:.title-area { padding 0 0 0 20px; }
Thanks
Dom
CleanPageDom
ParticipantHi there
Not familiar with DPP, but if you add the following somewhere in
style.css
(DPP may allow the same thing), it should work:body.gppro-custom .entry-content h3 { font-weight: 700; }
Thanks
Dom
CleanPageDom
ParticipantIf you just have one landing page, you can do "view page source" (right click and select) and find the page-id-
Then you would add, in
style.css
body.page-id-XX .site-container { padding-top: 0; }
You could also add a custom body class to your landing page in the page editor screen (eg 'landing'). Then if you create more than one landing page, each with that custom body class, something like:
body.landing .site-inner { padding-top: 0; }
would cover all of them.
Thanks
Dom
May 7, 2015 at 4:54 am in reply to: Insert icon right after last paragraph on every blogpost #150556CleanPageDom
ParticipantHi there
Try adding this to
style.css
.site-inner .entry-content > p:last-of-type::after { content: " \25A0"; font-size: 12px; color: #999; line-height: 0; }
But check, as it was adding the character to one of your sidebar elements also, so you may need to get more specific with the CSS. Should get you started though.
Thanks
Dom
CleanPageDom
ParticipantHi James
Bear with me here, I may have missed something. I made a few small adjustments.
Add, in
style.css
:
h1.site-title { padding-top: 50px; }
.site-title a { padding: 50px 0 0; }
.site-header .site-title a { padding-left: 0; }
You may also have to adjust the top and bottom padding on
.site-header .genesis-nav-menu li a
to get the white background over the active page to match the bottom of the header background.Thanks
Dom
CleanPageDom
ParticipantJust watch out for some of the newer ones (such as Parallax Pro, Cafe Pro, Altitude Pro) as they have widgetized front pages, so you'd need to code up the home pages through Widgets. You should stick to the more blog-style layouts maybe?
May 5, 2015 at 3:26 pm in reply to: Change Background image in about area of Modern Portfolio #150294CleanPageDom
ParticipantHi there
The code in the Scary Close site looks like this:
#about { background-image: url('http://scaryclose.com/wp-content/uploads/2015/02/opt-in.jpg'); background-size: 900px 257px; padding: 8rem 0 3.6rem !important; }
So, prepare your background image, upload it either into themes/THEMENAME/images (via ftp) or into the Media Library, then set your css to:
#about { background-image: url('http://filename/path') <strong>OR</strong> url(images/filname.ext); background-size: EXPERIMENT; }
You could also follow this guide from CSS Tricks and set it to:
#about { background-image: url(images/filename.ext) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Thanks
Dom
CleanPageDom
ParticipantHi there
This is a really silly question, but have you made sure the "Number of slides to show" setting is set to 7?
Dom
CleanPageDom
ParticipantHi there
Is it ignoring all of it, or just some?
You have an extra space in
.intro-text 2,
in that second media query.Thanks
Dom
-
AuthorPosts