-
Posts
-
Is It Possible Insert The SideBar on The Right or On The Left In The Page and have the page background?
ThanksHey denisj77,
I’m not sure I understand, do you mean have a image background span the whole page and behind the sidebar, or have a background color? Can you include a screenshot of what you would like to see?Best regards,
MikeHi,
Yes you can with this css:#main .container_wrap { background-image: url(https://your-site.com/your_image.jpg) !important; }Best regards,
MikeHi,
You can Try this code in the General Styling > Quick CSS field
or in the child theme style.css in Appearance > EditorBest regards,
MikeOk, But How Can I Have My Sidebar in A Color Section?
Or, How Can I Create a Page with Overlay Image With Text and Sidebar Togheter?
Here my page : https://residenzeparadiso.com/test-prenota/
ThanksHi,
Here are two options, Try this code in the General Styling > Quick CSS field for a background-image:#top.page-template-default.page.stretched #main .container { background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg); background-repeat: repeat; }But if you want opacity on your image, try this one:
#top.page-template-default.page.stretched #main .container:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.2; background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg); background-repeat: repeat; }If you want this only on one page let us know and we can help add the page_id to the code.
Best regards,
MikeI tried the second code and it works perfectly, I Want this only on one page, Can You Help Me To add the page_id to the code?
Another Question, how can I adapt the image to the whole page? In My case the image is shot several times….
-https://residenzeparadiso.com/test-prenota/-
ThanksHi,
I have changed the code so it will only work on the one page, and so it won’t repeat the image.#top.page-id-614 #main .container:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.2; background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg); background-repeat: no-repeat; background-size: cover; }Best regards,
MikeAnother Question, If I Insert A Color Section on The Top Of The Page, I get Inside The Image of The Code, How Can I Delete It? Thanks
Example: https://residenzeparadiso.com/test-prenota/
Here on The Top I Have Inserted a empty color section.
ThanksHi,
Try setting a background color for the color section, by default it is transparent.Best regards,
MikeHi,
To use the code on other pages, change the “.page-id-614” to those pages. To find the page id, open the developer tools by right clicking on the page and choosing “inspect” then look in the code at the top:
see this image: https://pictr.com/image/8h3C9
There are also plugins that will show you the page id’s, such as: Reveal IDs
You can add many pages to the code with commas like this:#top.page-id-614 #main .container:before,#top.page-id-615 #main .container:before,#top.page-id-616 #main .container:before {Best regards,
MikeWith your Code in Test in Smartphone or Desktop Computer I I saw that the background image is not responsive and I have edges on the sides on the Pages…
#top.page-id-614 #main .container:before {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.2;
background-image: url(https://residenzeparadiso.com/wp-content/uploads/2017/12/chaplet-2489637_1920.jpg);
background-repeat: no-repeat;
background-size: cover;
}Hi,
For the desktop please go to: Enfold Theme Options > General Layout > Dimensions > Maximum Container width
and change it to 2500px.
Then for mobile try the css:@media only screen and (max-width: 767px) { .responsive #top #wrap_all .container { width: 100%!important; max-width: 100%!important; padding-left: 25px!important; padding-right: 25px!important; }}Best regards,
MikeHi,
Sorry, the socket is a different div, we can add the image to the socket but it will be a clear start of a new image. I recommend keeping the socket a solid color to define the end of the site.Best regards,
MikeHi, In my Socket I Have Defined a Solid Color: #ffffff …. But I Have The Image…
If I Can Change Color Work. How Can I Have Solid White?
ThanksHi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.Best regards,
MikeHi,
Oh, I see the issue now, I solved with this css in your custom css:#top.page-template-default.page.stretched #socket .container:before { background-image: url(https://residenzeparadiso.com/wp-content/uploads/2018/01/whitebackground.png) !important; background-repeat: repeat; }I designed it to match the rules for your background image, Please clear your browser cache and check.
Best regards,
Mike
- The topic ‘Sidebar with page background’ is closed to new replies.