Archived topic
widget area
15 replies · Started by francesco on February 17, 2022
I have a couple of questions regarding widgets:
- is it possible to hide widgets in the mobile version? I tried to do it, but without success.
- is it possible to modify the news by putting dividing lines?
example
Hi there,
can you share a link to your site where i can see them ?
Hi there,
1. To add borders between each post use this CSS:
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid;
}2. TO remove the entire right sidebar on mobile:
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}OR - to remove just the recent posts widget:
@media(max-width: 768px) {
.rpwwt-widget {
display: none !important;
}
}.
On what page are you seeing this ?
sorry david wrong post.
it would seem not to work.
The CSS should work.
Make sure the CSS code before it has no error, otherwise it won't work.
Or you can add it to the top of all your CSS code.
/* GeneratePress Site CSS */ #site-navigation {
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited {
border-width: 1px;
border-style: solid;
border-color: inherit;
}
.mc4wp-form-fields input[type="email"] {
margin-bottom: 10px;
width: 100%;
}
.archive.category .site .inside-article, .blog .site .inside-article{
background-color: #ffffff;
}
.entry-meta {
font-weight: 300;
font-size: 13px;
}
.entry-meta .byline a {
color: #26a9d8;
}
.entry-meta span a {
font-size: 18px;
}
.main-navigation:not(.toggled) li.menu-social > a,
.main-navigation:not(.toggled) li.search-item > a{
padding: 0 10px;
}
.post-image img {
transition: opacity 500ms;
}
.post-image img:hover {
opacity: 0.9;
}
.no-sidebar .entry-content {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.page.no-sidebar .entry-title {
text-align: center;
}
.top-bar .lsi-social-icons a,
.top-bar .lsi-social-icons a:focus,
.top-bar .lsi-social-iconsa:active,
.top-bar .lsi-social-icons a:hover{
background: transparent !important;
}
.masonry-load-more {
text-align: center;
}
.top-bar .lsi-social-icons li {
margin-bottom: 0 !important;
} /* End GeneratePress Site CSS */
/*
* Style Featured Posts on Home page
* **********************************/
/* shadow style images */
.home .wp-show-posts-inner .wp-show-posts-image.wpsp-image-left img {
box-shadow: 0px 2px 22px -6px rgba(0,0,0,0.5);
}
/* post title spacing */
.home .wp-show-posts-entry-header {
margin-bottom: 0.25em;
}
/* adjustments for tablets */
@media all and (max-width:1023px) {
.home .wp-show-posts-inner .wp-show-posts-image.wpsp-image-left {
}
}
/* adjustments for mobile */
@media all and (max-width:767px) {
.home .wp-show-posts-inner .wp-show-posts-image.wpsp-image-left {
}
}
/* Related News after posts */
@media all and (min-width:768px) {
#wpsp-1152.wp-show-posts-columns .wp-show-posts-inner {
margin-bottom: 0 !important;
}
}
/*
* Sidebar
* *********************/
.widget-area.sidebar .rpwwt-widget ul li a {
color: var(--contrast-2);
}
/*
* Style FluentForm in footer
* ******************************/
.site-footer .fluentform form {
display: grid;
grid-template-columns: 3fr 1fr;
}
.site-footer .fluentform .ff-el-group:not(.ff_submit_btn_wrapper) {
padding: 0;
margin: 0;
display: block;
border: 0;
}
.site-footer .fluentform .ff-el-group.ff_submit_btn_wrapper {
padding: 0;
margin: 0;
display: block;
}
.site-footer .fluentform .ff-el-group.ff_submit_btn_wrapper button {
width: 100%;
}
.site-footer .fluentform .ff-el-group input,
.site-footer .fluentform .ff-el-group button {
font-size: 1rem;
border: 0;
margin: 0;
padding: 10px 20px;
}
.site-footer .fluentform .ff-el-form-control {
background-color: #162933;
border: 0;
border-radius: 0.5em;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.site-footer .fluentform .ff-el-form-control:focus {
color: var(--contrast);
background-color: var(--base);
}
.site-footer .fluentform .frm-fluent-form .ff-btn-submit {
background: var(--accent);
color: var(--contrast);
font-weight: bold;
border: 0;
border-radius: 0.5em;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.paging-navigation p a:hover,
h2.wp-show-posts-entry-title a:hover,
div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
.generate-columns-container article.post:hover h2 {
text-decoration: underline;
}
#site-navigation {
border-top: 0px solid rgba(0,0,0,0.1);
border-bottom: 0px solid rgba(0,0,0,0.1);
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid;
} the widget area remains the same.
i saw that if i delete this code it works. how can i solve?
.paging-navigation p a:hover,
h2.wp-show-posts-entry-title a:hover,
div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
.generate-columns-container article.post:hover h2 {
text-decoration: underline;
}
#site-navigation {
border-top: 0px solid rgba(0,0,0,0.1);
border-bottom: 0px solid rgba(0,0,0,0.1);I solved it by moving the code above. even if I don't understand why.
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid;
}
.paging-navigation p a:hover,
h2.wp-show-posts-entry-title a:hover,
div#rpwwt-recent-posts-widget-with-thumbnails-2 ul li a:hover,
.generate-columns-container article.post:hover h2 {
text-decoration: underline;
}
#site-navigation {
border-top: 0px solid rgba(0,0,0,0.1);
border-bottom: 0px solid rgba(0,0,0,0.1);Can i change the color of the lines from customize or do i need an additional css?
Glad you were able to fix it. :)
With regards to the color of the border, you can modify the code provided by David to change the color. You can use rgb(0, 0, 0) for example or even use a variable available in your Global Colors so you can modify it in the Customizer in the future. Something like “var(—variablename)";
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid rgb(0, 0, 0);
}For variables:
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid var(—accent);
}See: https://share.getcloudapp.com/v1uL7gDN
You can also create your own color: https://share.getcloudapp.com/eDulO51P
Hope this helps! :)
hi, thanks for your help. unfortunately the code that can be changed from the customizer does not work for me.
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid var(—accent);
}in -accent I understand that I can choose any name. such as
.rpwwt-widget ul li {
padding-bottom: 15px;
border-bottom: 1px solid var (-mycolor);
}right?
