How to change background size/zoom in wordpress theme? - wordpress

I have a webpage using a wordpress theme:
The problem is: can you see the white space between the lateral menu and the text? and the white space between the text and the right corner? I want to delete it, like making zoom to the important part of the webpage.
Anyone knows how can I do it? what file and with what vars of the wordpress template I need to play to change this part?

I think you might need to specify your WordPress theme. Can you?
Do you mean you want to get rid of the side navigation or the styling?
if its the side navigation that you do love to get rid of i suggest you get the secondary menu turn off and for the white spaces i suggest you might need to have a little custom css to play with.
for the side nav i suggest you try this additional css to get the white spaces off
.site-navigation li{border-top:0;}
.secondary-navigation{border-bottom:0}
or you can install other css plugins such as simple custom css, css hero,etc
hope that will helps

Related

How to style answer box / add a new topic box

I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.

Want to create a menu in wordpress exactly likes http://www.bienvillecapital.com/

I want to create a vertical menu exactly like http://www.bienvillecapital.com/. I have tried few themes having vertical menu and also tried SuperFly menu plugin to get the result. Can anyone help me to get this?
Thank you.
Navigation bars are nothing more than HTML and CSS code aligned properly. I'm not really sure how well you know CSS and HTML, but this can be done with those, and understanding the concept is very direct. Please refer to this page for example: http://www.w3schools.com/css/css_navbar.asp

Weird icons border in footer in Wordpress

I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.

Remove styles from TinyMCE bullet points

I'm using TinyMCE html editor in my cakephp (2.5) project. When I use bullet points in this editor, it's shows underline with every bullet point. I used default TinyMCE settings with cakephp.
I attached sample screen shot. Is anyone has an idea to prevent this, thank you :)
It's strange that it would do that by default. I assume there is some other setting or CSS that's throwing it off, but either way, if you want to override it, you can use your own CSS for the TinyMCE content:
http://www.tinymce.com/wiki.php/Configuration:content_css
In case it helps anyone in the future. I've realised that tinyMCE copies the style of <p> to the bullets possibly in an attempt to make them look uniform.

Wordpress Header Nav Positioned Over Fullscreen Background Image

I am using the pro-theme "Frame" for Wordpress and have not been able to find support elsewhere for an issue (developer of theme won't support plugin compatibility issues--understandably). I am trying to re-position header/nav so that it does not overflow onto background images, rather, the background images are positioned below the header/nav wrapper/container. I've been trying to fix this issue for a few days now and cannot find a solution.
For example: below the link will show the BG image of a woman and I would like her head to not be cropped/covered. I also need whatever changes to be responsive and work with the additional features on the site (i.e. - homepage has a slideshow, etc.).
LINK
Thank you for any help--it is much appreciated!
Best regards,
The HTML of the page is a mess. I suggest to modify the background image of the woman itself (with whatever editor you want), just add a top margin to the image, let's say 80px white colour.
This is the easiest solution. If you provide me more details were this background is generated/paced I may be able to give you the CSS solution.

Resources