Edin Theme – New to CSS, Need some helpt to start off
-
Hi all, I am new to CSS and I was wondering if I could get some help in customizing the Edin theme. I have WordPress premium upgrade and I have already browsed the forum quite a bit without success so far… I would like to:
> Limit the featured image size on the main page
> Align text of featured pages to center on the main page
> Display featured images on the main page but hide these in the actual pages/posts
>Change background color of the featured content area of the main page
> Make the social media icons in custom menu BIGGER! :)Quite a wish list but if anyone can help, would be absolutely great. Many thanks in advance for your support! Greetz, Karo <3
The blog I need help with is: (visible only to logged in users)
-
Hi all, I want to change background color of captions under pictures in my posts. And I guess I need to do something about CSS but I am new to it. Anyone could help me out?
-
Hi.
Featured image size. Right now you have a div with your image size on background. Your div area is 256 high x 1020 width. You can change this area by using width and height properties. But you ought to take into account two things.
The height of this area is composed by padding-top: 120px + padding-bottom:120px + height 36px. So you should change not only height property but also padding.
Image width -1020px- is fixed with the same value as the content area. If you narrow it, you should need to add margin:auto to center your pic..hero.with-featured-image, body[class*="front-page"] .hero { padding: 40px 0px; height: 10px; width: 1000px; margin: auto; }Align text of featured pages. I am not sure to have understood what you want. Maybe this:
.featured-page .entry-summary p { text-align : center; }Change background color. This is easy:
.featured-page-area { background: red; }I told you it was easy ;)
Social media icons. Sorry, which icons?
I hope this helps you. Enjoy blogging.
-
-
-
Awesome! Thank you so much!!! :-)
Ow, and the social media icons: I removed them because I did not like the look. Just wondering if you can somehow change them, make them bigger for example.
-
One more thing… I am trying to get the featured images to display on the home-page but not on the pages themselves. Can this be done?
Tried several things already…
Thank you again!
-
I’m not seeing any featured images on your site right now, but you should be able to hide them from pages by using the “page” CSS body class found in the opening body tag in the HTML like this.
.page .hero.with-featured-image { background: none; padding-top: 20px; padding-bottom: 20px; }There was 108px of top and bottom padding to allow for the image. I’ve included declarations to reduce those to 20px.
For the social icons at the bottom right of your site, we can make them larger reasonably easily although the following may look like a lot of code. It covers all of the supported social services so if you add others later, they will be larger as well.
ul[id^="menu-social"] a[href$="/feed/"]::before, ul[id^="menu-social"] a[href*="codepen.io"]::before, ul[id^="menu-social"] a[href*="digg.com"]::before, ul[id^="menu-social"] a[href*="dribbble.com"]::before, ul[id^="menu-social"] a[href*="dropbox.com"]::before, ul[id^="menu-social"] a[href*="mailto:"]::before, ul[id^="menu-social"] a[href*="facebook.com"]::before, ul[id^="menu-social"] a[href*="flickr.com"]::before, ul[id^="menu-social"] a[href*="github.com"]::before, ul[id^="menu-social"] a[href*="plus.google.com"]::before, ul[id^="menu-social"] a[href*="instagram.com"]::before, ul[id^="menu-social"] a[href*="linkedin.com"]::before, ul[id^="menu-social"] a[href*="pinterest.com"]::before, ul[id^="menu-social"] a[href*="getpocket.com"]::before, ul[id^="menu-social"] a[href*="polldaddy.com"]::before, ul[id^="menu-social"] a[href*="reddit.com"]::before, ul[id^="menu-social"] a[href*="stumbleupon.com"]::before, ul[id^="menu-social"] a[href*="tumblr.com"]::before, ul[id^="menu-social"] a[href*="twitter.com"]::before, ul[id^="menu-social"] a[href*="vimeo.com"]::before, ul[id^="menu-social"] a[href*="wordpress.com"]::before, ul[id^="menu-social"] a[href*="wordpress.org"]::before, ul[id^="menu-social"] a[href*="youtube.com"]::before { font-size: 2em; height: 1em; line-height: 1; width: 1em; } ul[id^="menu-social"] a[href$="/feed/"], ul[id^="menu-social"] a[href*="codepen.io"], ul[id^="menu-social"] a[href*="digg.com"], ul[id^="menu-social"] a[href*="dribbble.com"], ul[id^="menu-social"] a[href*="dropbox.com"], ul[id^="menu-social"] a[href*="mailto:"], ul[id^="menu-social"] a[href*="facebook.com"], ul[id^="menu-social"] a[href*="flickr.com"], ul[id^="menu-social"] a[href*="github.com"], ul[id^="menu-social"] a[href*="plus.google.com"], ul[id^="menu-social"] a[href*="instagram.com"], ul[id^="menu-social"] a[href*="linkedin.com"], ul[id^="menu-social"] a[href*="pinterest.com"], ul[id^="menu-social"] a[href*="getpocket.com"], ul[id^="menu-social"] a[href*="polldaddy.com"], ul[id^="menu-social"] a[href*="reddit.com"], ul[id^="menu-social"] a[href*="stumbleupon.com"], ul[id^="menu-social"] a[href*="tumblr.com"], ul[id^="menu-social"] a[href*="twitter.com"], ul[id^="menu-social"] a[href*="vimeo.com"], ul[id^="menu-social"] a[href*="wordpress.com"], ul[id^="menu-social"] a[href*="wordpress.org"], ul[id^="menu-social"] a[href*="youtube.com"] { height: 2.5em; line-height: 2; width: 2.5em; } -
Thanks you so much! Looks so much better. :-)
I am starting to get a hang of it!
Thank you for supporting. <3 -
- The topic ‘Edin Theme – New to CSS, Need some helpt to start off’ is closed to new replies.
WordPress.com Forums 