How to add div in widget?

Resolved cosiek
(@cosiek)

6 years, 1 month ago

Hi,
I have a question. Is there a possibility in the plugin to add the div for image and title of the top posts in widget?

On my website (on desktop): https://www.imperiumromanum.edu.pl/en/ on the right side in the column are top posts. I would like to add for each post style like for below for ‘That day in Rome’ and ‘Quote’.

THe problem is that I cannot add any style for whole part: image and title at once. There is no DIV, for which I could style.

Apprecaite your help.
Regards,
Cosiek

The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

Plugin Author Ajay
(@ajay)

6 years, 1 month ago

What is the code you’re using for the Quote style? Maybe I can see if this can be adapted to the plugin markup
Thread Starter cosiek
(@cosiek)

6 years, 1 month ago
Thank you for reply.
It is plugin: QUOTE MASTER.

Code in the Widget for QUOTE:
```
<div class="cytatamp">
<a href="/?page_id=1006"><img src="https://www.imperiumromanum.edu.pl/wp-content/uploads/2020/04/kaligula.jpg" alt="Caligula" style="margin-bottom:1rem;" /></a>
<div class="widget">[quotes]</div></div>
```
Let me know if anything else is needed.
- This reply was modified 6 years, 1 month ago by cosiek.
Plugin Author Ajay
(@ajay)

6 years, 1 month ago

And, also the corresponding CSS please?
Thread Starter cosiek
(@cosiek)

6 years, 1 month ago
```
.cytatamp {

    margin-top: -5px;
    background-color: #fdfafa;
    padding: 15px;
    border: 1px solid #ada7a3 !important;
    border-radius: 0px 0px 32px 32px;
    color: #333;
    text-align: left;
    line-height: 25px !important;
    font: italic 16px georgia;
        line-height: normal;
    border: 0;
    padding: 0;
    box-shadow: none;
```
Plugin Author Ajay
(@ajay)

6 years, 1 month ago

I’m not sure if the entire code got copied in. It just ends with box-shadow:none; as a the last line

Thread Starter cosiek
(@cosiek)

6 years, 1 month ago

Yes it is full code for this DIV. TO have the proper style on the image and border.
Plugin Author Ajay
(@ajay)

6 years, 1 month ago
Can you please see if you have any custom styles in the Styles box in the setting?

Can you try these settings, in addition to them?
```
.tptn_posts .tptn_title {
    margin-bottom: 10px !important;
    clear: both;
    background-color: #fdfafa;
    border: 1px solid #ada7a3 !important;
    border-radius: 0px 0px 32px 32px;
    color: #333;
    text-align: center;
padding: 10px;
}

.tptn_posts.tptn_posts_widget img {
padding: 0 !important;
}
```
Thread Starter cosiek
(@cosiek)

6 years, 1 month ago

Thank you.

It looks good, but there is break between image and below title and field.
Plugin Author Ajay
(@ajay)

6 years, 1 month ago
```
.tptn_posts.tptn_posts_widget img {
padding: 0 !important;
margin: 0 !important;
}
```
Please also add a margin: 0
Thread Starter cosiek
(@cosiek)

6 years, 1 month ago

It worked. Thank you very much!

Great support from your side!

Plugin Author Ajay
(@ajay)

6 years, 1 month ago

Good to hear. Can you please consider a review if this plugin serves you well!

Thread Starter cosiek
(@cosiek)

6 years, 1 month ago

Of course, will do!

Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘How to add div in widget?’ is closed to new replies.