Jump to content

Archived

This topic is now archived and is closed to further replies.

Olly

Hide Featured image on Blog Posts

Recommended Posts

Olly

http://www.maryqueenofscots.net/1567-map-of-edinburgh-mary-queen-of-scots-darnley-kirk-ofield/

 

I just upgraded from DMS1 to DMS2 and I notice that the way the featured image displays on blog posts has now changed. It originally appeared as a small thumbnail to the left of the post title. Now it appears as a full size image. Since I also have the image inserted into the post, I am getting a duplicate. (See my link above for an example.)

 

Can you tell me how to change how the featured image is displayed? Better still I'd like to hide it from the displaying on the individual blog posts (since it's already visible there) and only show it on the blog index page. How can I do this?

 

Secondly there post author avatars used to be cropped to a circle. Now they are squares. How can I change this back?

 

Many thanks.

Share this post


Link to post
Share on other sites
batman

Hi Olly

Please, you can try to add in

 

Custom > Custom CSS/LESS

or better in 

Child theme

 

This for feature image

.pl-new-loop .hentry.single-post .metamedia {

    display: none;}

 

This for circle

.metahead a .avatar {

    max-width: 50px;

    border-radius: 100px;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Olly

Thanks - that worked perfectly! I stuck it in the style.css file of my child theme. I'm assuming that is the best place to put it?

 

Would you mind telling me how you figured out the CSS classes for each image? I'm desperately trying to learn how to do tweaks like this myself. I tried using firebug/chrome devtools but couldn't figure it out. Would you mind talking me through it? 

 

I apologise - I'm still pretty new to CSS! (I did the Code Academy course but so far don't have much real world experience.)

Share this post


Link to post
Share on other sites
Olly

One more thing, could you please help me to figure out the CSS required to remove the padding between the rows in the iBox content at the page below?

 

http://www.maryqueenofscots.net/people/lord-james-stewart-earl-moray-regent-scotland/

 

I cannot figure out how to write the CSS to remove the space between Born, Died, Cause of Death etc. 

 

This box was formatted using <span>. I created a class called 'people-metadata' for each DIV row.

Share this post


Link to post
Share on other sites
GetMeWebDesign

Olly I presume you are using Chrome Developer tools? Easy to find CSS but here is a sceencast-o-matic for you... you just need to adjust the margin-bottom to whatever you feel like

 

.row > [class*="span"], .row-fluid > [class*="span"], .editor-row > [class*="span"], .row-no-response > [class*="span"] {
margin-bottom: 0.7px;
}

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Olly

Thanks so much, you have really really helped me! I really feel I am beginning to understand this stuff now. :)

 

I have one more issue that I've been battling with. I can't figure out to to isolate a change to just the one page:

 

http://www.maryqueenofscots.net/people/lord-james-stewart-earl-moray-regent-scotland/

 

On the above page I used an iBox to display the image but I didn't want it to display the title underneath. I therefore used the following CSS to hide the title:

 

/* Hide title from the iBox on people pages */
.ibox .ibox-text h4 {
display: none;
}

 

Unfortunately this also hid the title from every iBox on my site(!) including all the ones here: http://www.maryqueenofscots.net/people/

 

How can I get it to change just the iboxes I specify? I tried creating a Custom Styling Class called 'people-page-avatar' and pasted it in the iBox but it doesn't seem to show up as a selector in the CSS when I refresh. Can you help?

 

Thanks so much for all your help. I really feel my understanding of CSS is almost there!

Share this post


Link to post
Share on other sites
greenfly

You need to be more specific with your CSS. You have told the site to apply the CSS  to all text that is H4 in all  iboxes.

 

Add a custom class but make it unique - example would be something like 

 

ollybox

 

in your CSS add

.ollybox h4 {
display: none;
}

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Olly

Thanks to all of you.

 

Is there an easy way to make images put in a MediaBox section round using CSS? I tried using the same method as above but it doesn't work?!

Share this post


Link to post
Share on other sites
Olly

I tried using the following:

 

/* Make people page avatars round */
.person-round-avatar .the-media {
    max-width: 100%;
    border-radius: 50%;
}

Share this post


Link to post
Share on other sites
Olly

.person-round-avatar was the class I created for the media boxes i want to style

Share this post


Link to post
Share on other sites
GetMeWebDesign
body .pl-content img {
max-width: 100%;
border-radius: 50%;
}
 
Your images are quite vertically aligned, by the way

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Olly

Right. I *think* I get this now. The above code would change ALL mediaboxes, yes? So if I just want to change one, I just need to reference the 'class' name (that I create) followed by the html tag of the object within it that i am styling (in this case <img>) and it'll be able to find it, right? I don't need to include all the individual tags nested between them?

 

This seems to work but I just want to be sure I understand why!:

 

.people-avatar-mb img {
max-width: 100%;
border-radius: 50%;
}

 

 

I'm aware of the image alignment. Still a work in progress!

 

Thanks for all your help.

Share this post


Link to post
Share on other sites
GetMeWebDesign

Olly By setting up a class you are laying specific CSS rules to that class. When you then add people-avatar-mb img under your Standard Options, then it will reference those rules. Means you can use that rule wherever and whenever you want without it affecting a global change.

 

It is the max width and the border-radius that are the specific rules. Just because you have given a class name related to what you are using it for (to help you remember it by) does not change what the rules will affect - it is a class of CSS rules and nothing what so ever to do with the img you are applying it to

 

Does that make sense? 

 

AS an example. Paste this into your wp admin > Pagelines > DMS Fallbacks > Custom CSS/LESS

 

.grey {
  background:#c8c8c8;
  opacity:0.7;
}

 

Reference with grey in either custom styling classes or inline CSS styling and you will learn how those CSS rules affect sections etc in different manners


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Pleasure... I can get on with doing my own sites now LOL


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
greenfly

Thanks GetMeWebDesign


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Olly

And here I am back again.... (sorry!)

 

I've actually been doing really well and have done lots of changes successfully on my own (promise!) but I got stuck on this:

 

Can anyone tell me why the amazon/kindle buttons are being placed on consecutive lines in the footer here: http://www.maryqueenofscots.net/people/

 

Whereas, on the home page they are fine, and display as a button group correctly here: http://www.maryqueenofscots.net/

 

The buttons are a button group, and use the same styling on both pages but the results are different. Oddly, I'm sure the footer buttons were working fine when I copied them across yesterday, but now they aren't. It's possible something else I changed interfered with them. Can anyone tell me what I am doing wrong?

Share this post


Link to post
Share on other sites
GetMeWebDesign

Have you tried with both pages using three columns?


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Olly

you mean one column for each button?

Share this post


Link to post
Share on other sites
GetMeWebDesign
No, I meant on one page you have two items with their amazon buttons below and on the other, you have an additional column with 'author' details in it.

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
quintinm

Thanks batman for this solution to hiding the featured image.

If i wanted to hide the post metadata for a specific custom post type like "products", but not for the normal blogs - would i have to create a specific products template and do this in the template?

 

So in a template called something like "page-products.php" and in that content loop, hide the post meta (Posted 

May 22, 2014

 · Add Comment [Edit])

I say that like i know what i am doing, but i will have to work that part out too :-)

 

Please advise if you can.

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×