customize CSS of the post slider‏

  • Unknown's avatar

    Dear team

    I managed to customize position and text size of the post slider with below mentioned CSS. However, what I would like to do is:

    – Change text color
    – have a background color of the post slider text
    – have a customizing possibility for each single post slider

    How can I do that? Moreover, is there an basic tutorial for basic CSS changes somewhere available?

    Thank you very much for your support
    Fabio

    .slideshow .text-holder {
    text-align: left;
    }

    .slideshow .headline .a {
    font-family: serif;
    font-size: 40px;
    }

    .slideshow .excerpt {
    font-family: serif;
    font-size: 40px;
    }

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

  • Unknown's avatar

    Hello there,

    Here’s a getting started CSS guide with helpful links to continue learning at the end https://en.support.wordpress.com/custom-design/css-basics/

    Would you mind pointing to the specific location of the post slider? (Guessing it is the main page slider, but want to be doubly sure).

    Thanks,
    Sage

  • Unknown's avatar

    Hi Sage

    Thank you very much for the CSS-basic website which is a perfect place for me to learn and test step by step new CSS Things :-)

    And yes, my questions are all related to the main post slider on the Homepage of http://www.transform-digital.ch

    Do you have any feeback on that?

    Best
    Fabio

  • Unknown's avatar

    Hey Fabio,

    This should help with the slides:

    /* Slide title colour */
    .slides .headline a {
    	color: #5fb689;
    }
    /* Slide content text colour */
    .slides .excerpt p {
    	color: #72a6b6;
    }
    
    /* Adds a background colour to the slide, edit the last number (.5) for opacity (1.0 to 0) */
    .slides .text-holder {
    	width: 100%;
    	max-width: 537px;
    	background-color: rgba(255,255,255,.5);
    	padding: 20px;
    }

    Then if you’d like to specify a specific slide you need to get the post id. Guide here (the way they show you it’s easiest to find when using the actual wp-admin dashboard instead of the default wordpress.com one)

    The ids for the three posts you have in there are:
    .post-459
    .post-456
    .post-444

    When specifying a single post you can use the code I’ve given above and place the id after “.slides” like so:

    .slides .post-459 .excerpt p {
    	color: #72a6b6;
    }

    Please let me know if that doesn’t make sense or if you have any other questions!
    Sage

  • The topic ‘customize CSS of the post slider‏’ is closed to new replies.