- This topic has 13 replies, 2 voices, and was last updated 4 years, 2 months ago by
Leo.
-
AuthorPosts
-
April 6, 2018 at 6:53 am #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.2GP Premium 1.6.2April 6, 2018 at 8:46 am #543052Leo
StaffCustomer SupportHi 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:
Try getting it start with it and let us know if you get stuck 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 6, 2018 at 10:29 am #543141Nacho
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.
April 6, 2018 at 10:31 am #543142Nacho
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.
April 6, 2018 at 1:19 pm #543244Leo
StaffCustomer SupportNo problem 🙂
We can revisit once the site is viewable online.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 6, 2018 at 6:36 pm #543415Leo
StaffCustomer SupportAnd also if you edit the original topic and use the private URL field then only Tom and myself can see.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 7, 2018 at 8:33 am #543823Nacho
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.
April 7, 2018 at 12:53 pm #544005Leo
StaffCustomer SupportIt’s really hard solve this problem by looking at code and screenshots.
Can we revisit this once I can look at it live?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2018 at 7:22 am #545253Nacho
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.
April 9, 2018 at 8:41 am #545407Leo
StaffCustomer SupportCan you please edit the original topic and use the private URL field?
It makes it much easier for us to track.
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2018 at 9:23 am #545471Nacho
Hi Leo,
I´ve just done it.
Thanks a lot.
April 9, 2018 at 11:54 am #545615Leo
StaffCustomer SupportGood job! You are almost there 🙂
Try this additional CSS:
.entry-thumbnail.round { margin-left: auto; margin-right: auto; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/April 9, 2018 at 1:11 pm #545672Nacho
Hello Leo,
Wohooo! That worked like a charm.
Thank you so much Leo, now it looks good.
Have a good day.
Bests.
April 9, 2018 at 2:50 pm #545751Leo
StaffCustomer SupportNo problem at all 🙂
You did all the hard part!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.