- This topic has 19 replies, 3 voices, and was last updated 4 years, 5 months ago by
.
-
Posts
-
Hi Tom,
currently using the beta version and am trying to make a similar style blog post layout and look to https://d.pr/i/cDBSsoTo be honest im not really getting anywhere close yet, best i could do was set the “cards” as Base but it seems the image ratio is preset and i cant seem to change it – trying to keep the aspect ration 2:1 (1200×600)
is it possible to get some tips to be able to style:
-featured image (so the aspect ratio stays true) EDIT- i think i got the image ratio correct now.
-style the size, font & bold of the excerpt content and title (separately)
-slight shadow to the outside of the box
-only have the padding effect the text and not the imagethanks
Hi there,
Any chance you can link me to what you have right now so I can provide accurate CSS?
Thanks! 🙂
hey Tom,
just sent through the details on the support contact form with Url and the url im trying to style similar toHow about this?:
#wpsp-2687 p.wp-show-posts-entry-title { font-weight: bold; font-size: 22px; } #wpsp-2687 .wp-show-posts-entry-summary { font-size: 16px; } #wpsp-2687 .wp-show-posts-inner { box-shadow: 0 4px 8px 0 rgba(38,153,251,.2); border: 1px solid #dfdfdf; }Let me know 🙂
hi Tom,
I added that in via Simple CSS but none of it is making any changes and im not sure why?
any ideas?Nope, only CSS. I just tried it in developer tools and it worked.
Can you try clearing any caching plugins/autoptimize?
Hi Tom,
Sorry for the delay, worked out why the CSS changes were having no effect (although i found they were originally working in mobile view fine),
it was/is some previous CSS i had that i am using to style a element header, if i take that out the WP show posts CSS takes effect (also if i make the wp show posts CSS before the element header CSS it works).
here is both codes. as it is below, the wp show posts code doesnt work, but if i put it first it works (is there any obvious conflicting code here which i cant see?Also got 2 more questions:
1: what CSS can i use to make both the post title and post entry line-height smaller (its a little too spread out at the moment).
2: if i want this CSS to take effect on other wp show posts pages i make, how do i incorporate each wp show post id and combine them into this CSS?
thanks heaps Tom/* Element Header – Author, Date, Category Font Size CSS Change */
.hero-meta {
font-size: 15px;
}/* Author,publish,category make spacing and responsive on mobile */
@media (min-width: 769px) {
.author-meta, .publishdate-meta, .category-meta{
display: inline-block;
}
.publishdate-meta {
padding-right: 15px;
}
.author-meta {
padding-right: 15px;
}
}
@media (max-width: 768px) {
.author-meta,
.publishdate-meta, .category-meta {
display: block;
}/*WP Show Posts CSS*/
#wpsp-2687 p.wp-show-posts-entry-title {
font-weight: bold;
font-size: 22px;
}#wpsp-2687 .wp-show-posts-entry-summary {
font-size: 16px;
}#wpsp-2687 .wp-show-posts-inner {
box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
border: 1px solid #dfdfdf;
}It looks like your media query is missing the closest bracket
}(at the very end of your CSS).1. Try this CSS:
.wp-show-posts-entry-title { line-height: 1em; }2. You need to duplicate the selectors where you have an ID:
#wpsp-2687 p.wp-show-posts-entry-title, #wpsp-1234 p.wp-show-posts-entry-title { .... }Ahh, yes i did miss the } bracket, added that in and that part is working now.
line height code works perfectly too.*Is it possible when we add the padding that it only adds the padding to the content (words) and not the images, so the image stays the full width of the content box?
*Also, is there a more central way to add the individual Post ID’s for the CSS to take effect, for example could i group all my wp show post ID’s inside of a php snippet and give them a group name and use that one name for the CSS?
this is only because i currently have about 9 different WP show post lists, so to style each page, i would be adding 9 ID’s x 3 (entry title, summary, inner(shadow) ).
I still can do it the regular way, just seeing if there is a cleaner way for the CSS code?1. Not by default, but you can try our base card: https://wpshowposts.com/wpsp-pro-1-0/
2. There’s a custom class option you add a class name to. That way you can add one class to many lists and target all of them with that one class name.
Let me know if you need more info 🙂
the custom class option sounds like a clean solution to what im doing, could you give a quick rundown on how or whats involved?
thanks 😉Hi there,
the Custom Class can be added to any list from the More Settings tab, named Section HTML Classes. You can then specify a class instead of the WPSP ID in your CSS. For example you have this CSS:
#wpsp-2687 .wp-show-posts-inner { box-shadow: 0 4px 8px 0 rgba(38,153,251,.2); border: 1px solid #dfdfdf; }Which is specific to list 2687. Using a custom class in any list would allow you to do this:
.my-custom-class .wp-show-posts-inner { box-shadow: 0 4px 8px 0 rgba(38,153,251,.2); border: 1px solid #dfdfdf; }So many lists can have the same class and the one CSS Rule will apply to all of them.
seems i’m doing something wrong? when im trying to use a custom class name, it isnt having any effect.
this is what i’ve done below,Inside WP Show Posts settings: Section HTML Classes – global style class
Inside Simple CSS:
/*WP Show Posts CSS*/
.global-style-class p.wp-show-posts-entry-title {
font-weight: bold;
font-size: 22px;
line-height: 1em;
}.global-style-class .wp-show-posts-entry-summary {
font-size: 16px;
line-height: 1.3em;
}.global-style-class .wp-show-posts-inner {
box-shadow: 0 4px 8px 0 rgba(38,153,251,.2);
border: 1px solid #dfdfdf;
}
- You must be logged in to reply to this topic.