CSS fix for “link below image” sidebar layout

  • EN:
    I needed a 1/4 screen width widget for the sidebar, so that the picture was full-width, and the link was under the picture and not on the side.
    I’ve added padding to the top and bottom of each .rpwe-block li
    to style it with my theme, I removed the text colors and font-size: 12px; font-size: 11px; and line-height: 1.5em;

    I think that it would be more convenient to save it in a separate css file than in php

    please take into plugin my corrections and add them to the code of your plugin so that I can update the plugin as standard in the future.

    RU:
    Исправление CSS для sidebar-вёрстки “ссылка под картинкой”
    мне нужен был виджет на 1/4 ширины экрана для sidebar, чтобы картинка была на всю ширину, а ссылка под картинкой а не сбоку.
    Я добавил отступы сверху и снизу у каждого .rpwe-block li
    чтобы стиль сочетался с моей темой я удалил цвета текста и font-size: 12px; font-size: 11px; и line-height: 1.5em;

    я считаю что в отдельном css файле это было бы удобнее сохранять чем в php.

    прошу учесть мои исправления и внести их в код Вашего плагина, чтобы я мог в будущем обновлять плагин стандартно.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter v0van

    (@v0van)

    includes/functions.php

    /**
 * Sets up the default arguments.
 *
 * @since  0.9.4
 */
function rpwe_get_default_args() {

	$css_defaults = ".rpwe-block ul {
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}

.rpwe-block li {
/*border-bottom: 1px solid #eee;*/
margin-bottom: 10px;
padding-bottom: 10px;
list-style-type: none;
}

.rpwe-block a {
display: inline !important;
text-decoration: none;
}

a.rpwe_a {

}

.rpwe-block h3 p, .rpwe-block div, .rpwe-block h3 {
background: none !important;
clear: none;
margin-bottom: 0 !important;
margin-top: 0 !important;
/*font-weight: 400;
font-size: 12px !important;
line-height: 1.5em;*/
}

.rpwe-thumb {
/*border: 1px solid #eee !important;*/
box-shadow: none !important;
/*margin: 2px 10px 2px 0;
padding: 3px !important;*/
}

.rpwe-summary {
/*font-size: 12px;*/
}

.rpwe-time {
/*color: #bbb;
font-size: 11px;*/
}

.rpwe-comment {
/*color: #bbb;
font-size: 11px;*/
padding-left: 5px;
}

.rpwe-alignleft {
display: inline;
float: left;
}

.rpwe-alignright {
display: inline;
float: right;
}

.rpwe-aligncenter {
display: block;
/*margin-left: auto;
margin-right: auto;*/
}

.rpwe-clearfix:before,
.rpwe-clearfix:after {
content: \"\";
display: table !important;
}

.rpwe-clearfix:after {
clear: both;
}

.rpwe-clearfix {
zoom: 1;
}
";
    Thread Starter v0van

    (@v0van)

    includes/functions.php

    /**
 * Custom Styles.
 *
 * @since  0.8
 */
function rpwe_custom_styles() {
?>
<style>
.rpwe-block ul {
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}

.rpwe-block li {
/*border-bottom: 1px solid #eee;*/
margin-bottom: 10px;
padding-bottom: 10px;
list-style-type: none;
}

.rpwe-block a {
display: inline !important;
text-decoration: none;
}

a.rpwe_a {

}

.rpwe-block h3 p, .rpwe-block div, .rpwe-block h3 {
background: none !important;
clear: none;
margin-bottom: 0 !important;
margin-top: 0 !important;
/*font-weight: 400;
font-size: 12px !important;
line-height: 1.5em;*/
}

.rpwe-thumb {
/*border: 1px solid #eee !important;*/
box-shadow: none !important;
/*margin: 2px 10px 2px 0;
padding: 3px !important;*/
}

.rpwe-summary {
/*font-size: 12px;*/
}

.rpwe-time {
/*color: #bbb;
font-size: 11px;*/
}

.rpwe-comment {
/*color: #bbb;
font-size: 11px;*/
padding-left: 5px;
}

.rpwe-alignleft {
display: inline;
float: left;
}

.rpwe-alignright {
display: inline;
float: right;
}

.rpwe-aligncenter {
display: block;
/*margin-left: auto;
margin-right: auto;*/
}

.rpwe-clearfix:before,
.rpwe-clearfix:after {
content: \"\";
display: table !important;
}

.rpwe-clearfix:after {
clear: both;
}

.rpwe-clearfix {
zoom: 1;
}
</style>
<?php
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS fix for “link below image” sidebar layout’ is closed to new replies.