Border arround the preview pictures of the latest blog posts

  • Unknown's avatar
    hobartcare · Member ·

    Hello, I would like to add a white inner border of 20 pixels around the pictures down at the bottom of my front page here: https://hobart-care.de, thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hallluke · Member ·

    Hi, your site is set to private so I can’t see it. Can you invite me to be a viewer of your site (even just temporarily) so I can take a look at your actual home page. Either that or can you let me know what theme you’re using, then I will take a look at the theme demo page and hopefully be able to give you some code that will work too.

  • Unknown's avatar
    hobartcare · Member ·

    HI hallluke, we use the venture theme. Thank you.

  • Unknown's avatar
    hallluke · Member ·

    Thanks, so based on the Venture theme demo site I’m guessing you mean the post slider at the bottom of the home page, you can add a white border using this CSS:

    #front-blog-items .slick-slide {
	border: 20px solid #fff;
}
  • Unknown's avatar
    hobartcare · Member ·

    Thank you very much!!! Its great!!

  • Unknown's avatar
    hobartcare · Member ·

    Do you also know, how I can change colour of the slider buttons?

    Thanks in advance :)

  • Unknown's avatar
    hallluke · Member ·

    Yep, here’s the code for the arrow and background colours for the normal and hover states:

    .front-block a.prev-item, .front-block a.next-item {
    color: #f00;
    background-color: #ff0;
}

.front-block a.prev-item:hover, .front-block a.next-item:hover {
    color: #0f0;
    background-color: #00f;
}
  • Unknown's avatar
    hobartcare · Member ·

    Hi Hallluke,

    thanks – but I mean the slider-buttons in front of the “Featured-cinten-pictures”- its the header picture of the front page…

  • Unknown's avatar
    hallluke · Member ·

    The main image slider icons you can style with this – there’s an extra setting for the colour of the border too:

    .slick-prev, .slick-next {    position: absolute;
  background-color: #f00;
  color: #0f0;
  border-color: #00f;
}

.slick-prev:hover, .slick-next:hover {
  background-color: #0ff;
  color: #0f0;
  border-color: #ff0;
}
  • Unknown's avatar
    hallluke · Member ·

    Oops, ignore the position: absolute; bit, I messed up copying it from my browser inspector. It should just be:

    .slick-prev, .slick-next {
  background-color: #f00;
  color: #0f0;
  border-color: #00f;
}

.slick-prev:hover, .slick-next:hover {
  background-color: #0ff;
  color: #0f0;
  border-color: #ff0;
}
  • Unknown's avatar
    hobartcare · Member ·

    Thank you a lot :)))))

    Do you also know , how I can change the colour of the little arrow “down” inside the slide show?

    Thank you!

  • Unknown's avatar
    hobartcare · Member ·

    I have a further question :)
    Do you know, how can I change the colour of the arrow at the front page of the blog post preview?
    –> Read more

    Thank you so much :)

  • Unknown's avatar
    hallluke · Member ·

    This should do the trick:

    #fullscreen-header .skip-to-entry::before {
	color: #53d2a0;
}
  • Unknown's avatar
    hobartcare · Member ·

    Great :) It fits :) You make me lucky…

    It is also possible in Venture-theme to show navigation-path?

    Can you also reaveal, where you get the information from? :DDD

    Thank you !

  • Unknown's avatar
    hallluke · Member ·

    Do you mean the page structure of the page you’re on? Like Main Page > Child Page > Grandchild Page?

    I don’t think that’s possible in your theme. CSS can only be used for styling what’s already there but if you give me a better idea of what you’re looking for (a link to a site that already shows what you want would be good). You can always include a sitemap though.

    I use the FireFox web browser because I really like the inspector it has for viewing source code of the web pages you visit. On top of that I’ve been messing around with websites since I was a kid so I’m pretty familiar with HTML and CSS and on top of that I’ve been hanging out on and off here in the WordPress.com forums for a while so I know how a lot of the themes tend to be set up.

    There’s a few good links at the bottom of the custom CSS page and a good primer here.

  • Unknown's avatar
    hobartcare · Member ·

    Thanks…yes I meant this , but I think also that’s not possibel …but its okay.

    I have a further question :)
    Do you know, how can I change the colour of the arrow at the front page of the blog post preview?
    –> Read more

    Thank you so much :)

  • Unknown's avatar
    hallluke · Member ·

    For just the arrow it should be this:

    .has-arrow::after {
	color: #f00;
}

    For the page structure bit can you point to an example page on the theme demo site so I can take a look and see if there are any work-arounds you might be able to use?

  • Unknown's avatar
    hallluke · Member ·

    So I found some child pages on the demo site and it looks like you could add a text only description of the parent page just above the page title like this:

    body.page-child .entry-title {
  position: relative;
}

body.page-child .entry-title:before {
  font-size: 16px;
  position: absolute;
  top: -20px;
  letter-spacing: 1px;
}

body.page-child.parent-pageid-112 .entry-title:before {
  content: "Our approach > ";
}

    The only downside is that you’d need to change the .parent-pageid-112 bit to suit your site and duplicate that line for each different parent page you had.

    It’s possible but I don’t think it looks very tidy so I wouldn’t recommend doing it.

    Another option is to use the custom menu widget in your sidebar with a new custom menu. If it doesn’t indent the child pages by default it might be possible to do that with CSS. I can’t really offer suggestions because I can’t find an example on the theme demo site.

  • Unknown's avatar
    hobartcare · Member ·

    Hi Hallluke, you’re really great :D

    I try the options and take a look what the best…

    How can I make a hover effekt on blog previews like in the examle here: theme demo site`?

    Thank you! I want to hug you – your help is amazing

  • Unknown's avatar
    hallluke · Member ·

    Can you try posting a link to your example again. If you’re ever in London I accept thanks in the form of beer or pizza!

1 2 3
  • The topic ‘Border arround the preview pictures of the latest blog posts’ is closed to new replies.