Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Sidebar widget like the one below for converting

Home Forums Support [Resolved] Sidebar widget like the one below for converting

Home Forums Support Sidebar widget like the one below for converting

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #542896
    Nacho

    Hello Tom,

    Will it be possible to create a sidebar widget like the one in this site: https://romualdfons.com/aumentar-15k-visitas-al-dia-marketing-contenidos/

    It´s made with CSS help I guess.

    If so, would you mind giving me a few tips for creating that?

    Thanks a lot Tom.

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #543052
    Leo
    Staff
    Customer Support

    Hi there,

    Can you show me what you have so far?

    The page you linked created that with one single widget and several div.

    You can actually see it by using browser inspect like this:
    Unable to display content. Adobe Flash is required.

    Try getting it start with it and let us know if you get stuck 🙂

    #543141
    Nacho

    Hello Tom,

    Thanks for the video. I´ve managed to get the title centered and insert the image in the text content (I can´t center it) but I see it has like a lot of divs which I cannot see in my sidebar.

    I´ll keep playing with the CSS.

    Thanks a lot for the advice.

    #543142
    Nacho

    Oh, sorry Leo, I did not see your name.

    I´m going to play a bit more with it since right now I´m in a hosting migration and don´t know yet when it´s going to be finished.

    Thanks a lot for your help Leo.

    #543244
    Leo
    Staff
    Customer Support

    No problem 🙂

    We can revisit once the site is viewable online.

    #543415
    Leo
    Staff
    Customer Support

    And also if you edit the original topic and use the private URL field then only Tom and myself can see.

    #543823
    Nacho

    Hi Leo,

    Well, I think I´m getting there but I can´t center the first image to the center. Here is the CSS and the Screenshot of what I´ve achieved since I´m trying locally.

    Image: https://ibb.co/m95cwc

    CSS:

    .button.sun-flower,
    .button.sun-flower:visited {
    	background: #F1C40F;
    	color:#FFF;
    	color: black;
        background-color: #ffd700;
        border-color: #ffd700;
        border-bottom: 2px solid #ccaa01;
    }
    
    .button.sun-flower:hover,
    .button.sun-flower:active {
    color: black;
        background-color: #ffd700;
        border-color: #ffd700;
    }
    
    #text-2 {
    	padding:0;
    }
    
    #text-2 .contrast {
    	background-color: gold;
      padding: 2rem 1rem 3rem 1rem;
    }
    
    #text-2 .widget-title-contrast{
    	  font-size: 1.5rem;
        border-bottom: none;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
    	text-align:center;
    	font-weight:700;
    }
    
    #text-2 .top{
    	padding: 2rem 1rem;
        padding-bottom: 1rem;
    	margin-top:-70px;
    }
    
    #text-2 .entry-thumbnail{
    	margin-bottom: 1rem;
        width: 80px;
    }
    #text-2 .round img {
        border-radius: 50%;
    }
    
    img {
    	  vertical-align: middle;
        max-width: 100%;
    }
    img {
    	height:auto;
    }
    
    #text-2 .bottom{
    	  padding: 2rem 1rem;
        padding-bottom: 1rem;
    }
    
    #text-2 .quote-text{
    	margin-bottom: 1rem;
        position: relative;
        z-index: 3;
        color: #383838;
        font-size: .75rem;
        font-weight: 400;
        background-color: #fff;
        border-radius: .2rem;
    }
    
    #text-2 .quote-text-mask{
        padding: 1rem;
        background-color: #fff;
        position: relative;
        z-index: 100;
        border-radius: .2rem;
        box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.75);
        text-align: initial;
    }
    
    #text-2 .button.sun-flower{
    	display: block;
      max-width: 25.875rem;
      margin: 0 auto;
    }
    

    Thanks a lot Leo.

    #544005
    Leo
    Staff
    Customer Support

    It’s really hard solve this problem by looking at code and screenshots.

    Can we revisit this once I can look at it live?

    #545253
    Nacho

    Hi Leo,

    The website is live again. Do you mind if I send you the URL by private message?

    If so, where should I send it?

    Thanks a lot.

    #545407
    Leo
    Staff
    Customer Support

    Can you please edit the original topic and use the private URL field?

    It makes it much easier for us to track.

    Thanks!

    #545471
    Nacho

    Hi Leo,

    I´ve just done it.

    Thanks a lot.

    #545615
    Leo
    Staff
    Customer Support

    Good job! You are almost there 🙂

    Try this additional CSS:

    .entry-thumbnail.round {
        margin-left: auto;
        margin-right: auto;
    }
    #545672
    Nacho

    Hello Leo,

    Wohooo! That worked like a charm.

    Thank you so much Leo, now it looks good.

    Have a good day.

    Bests.

    #545751
    Leo
    Staff
    Customer Support

    No problem at all 🙂

    You did all the hard part!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.