How do I raise the contents closer to the head? The Left column should be closer to the dancing baby. The main area (starts with About Us) should be closer to the menu Fun Fun Fun. Don't worry about the white space above the menu... I have plans for that area. AND... can the answer help with other WordPress themes? ie; is there some CSS coding to do?
http://fun.mrchuckw.com
The best thing to do for long-term learning and development of WordPress themes is to learn how to use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE.
Like this:
Those tools will allow you to see what's loading on your site and in the theme and let you work with and change the CSS and HTML and see the results before you make changes to the style sheet and templates of the theme.
And, make a child theme of your MetroX theme so any changes you make will stay if you update the parent theme. See Child Themes « WordPress Codex
I read through the page's source code, you want to open your theme's CSS page, this link here. Under the "==========Header=========" section, you should reduce the values of (or completely remove) the padding/margin-top.
Related
Website builder name: Dynadot not Wordspace SO I CANNOT MAKE A CHILD THEME
I want css code for my website P.S The website has prebuilt themes and we can basically customize text, change pictures, add products etc. The website also provides a CSS editor like square space does. I have been to so many websites to try to copy some code but not a success. I have no experience with it either. Here is some information that might be useful.Also, the first pictures has drag and drop options like i can drag VIDEO to a certain part Here is a example website: https://www.svpartners.com/ I don't want the image animation it already has i need some new ideas on how to customize it with CSS, Font for the website Open sans
The screenshot 1 shows how my website theme already looks also at the bottom left there is a code option and there is a screen shot #2 for it so it might be helpful. Again I have tried many sites but most ask for money and most are not helpful. ALSO a GIF so you can have a better view😁 please help me out thanks
THE GIF
I am new here, I don't know how this works! Just ignore the writing if it'd not good, Also comment if you need any more details
I have created a grid with simple custom html to use as audio players
I am adding the custom html to the Wordpress theme with Elementor Builder custom html element/widget
Unfortunately, under each player image there is a gap
Looks like this
https://jmp.sh/sBBRFwV
Should look like
https://jmp.sh/Fq5a0TA
I would really like to use it with Hello Elementor Theme on a new website, but this gap is a deal breaker for me
I then tested it with a number of other themes with these results
WP 2020, Astra and OceanWP do not have this problem, no gap, perfect
WP 2019, Neve and Generate Press also have the problem, visible gap
I have exhaustively compared the css of the themes that both have and don’t have the gap and I cannot figure out the cause
I can remove the gap by adding css line-height or font-size: 0; on the grid item element, but this is not a real solution just dealing with the symptom as the themes that don’t have gaps have line-height and font-sizes greater then 0
I installed each theme on the latest WP on separate test sites and only have Elementor and Simple Custom CSS plugins, the page template is set to elementor canvas on each install
I think it is to do with how each theme deals with resetting or normalizing the css, but could be wrong
I’m lost.
Could someone look at this and give me some insight into what I am missing
I really don't want to have to use a different theme if I can help it
Best regards
Ashley
I've only compared wp2020 and neve but assuming it's going to be a similar issue.
On the wp2020 version, if you look for the section tag with class "elementor-element-e86902a" you'll see it's inheriting some styles from http://www.calpeguide.com/wp2020/wp-content/themes/twentytwenty/style.css?ver=1.5 these are missing on the equivalent section tag (elementor-element-54a1e41) on the neve site.
This is all I could see, so might be worth trying to recreate on the neve site.
The image should have display property, wether it's block, inline-block etc
I have found the answer, there was a missing display: block; on the img tag
Simple really, but like finding a needle in a haystack
In the end I used an old problem solving technique I learnt in the 70ies as an apprentice
Test, halve the system, test again, halve again etc
I added all 6500 lines of reset css from wp2020 theme to wp2019 theme and started from there
Thanks for having a look for me
Best wishes
Ashley
I've just got started with Wordpress and it was suggested to use a child theme so I purchased the Magazine Pro theme. This has got the perfect layout for my needs but I find some of the padding is too intense and in particular when I have a leaderboard banner at the top my text for my blog title is wrapping.
I want to reduce my title text and reduce the padding. I know how to do that, I've got plenty of experience in front end dev but I just don't know if I should create a child theme (or grandchild theme) based off Magazine Pro or whether I should modify the css file directly in my Magazine Pro css file? What I'm worried about it overwriting my changes by any updates to the child theme.
What's the best course of action here, I'm really keen to get cracking on some content but my site looks a bit crap with the header text wrapping.
I would suggest you keep the original and create a child. This way if you make some mistakes you can then take the original code and correct them.
I'm creating a Wordpress theme from scratch, and so far everything's going well (it's my first time). However, underneath the admin bar I have 18 pixels of whitespace that wasn't in my static HTML page before Wordpress-ing it up. See below for a screenshot:
The blue part is the header, which should be flush with the admin bar. Is there any obvious reason for this happening?
I've had a similar thing happen, and I believe your issue is white space in your html. Go through and remove any extra spaces which may be rendering, especially before (or after) your <?php ?> tags.
maybe you could give us some more css. That could have thousands of reasons. If you dont work with firebug or other developer tools you should defenitley check that out. With this tools you can click at the place with the css element you want to see and see the attributes...
https://addons.mozilla.org/de/firefox/addon/firebug/
or click at chrome on the preferences of the browser...than "tools" and then "developer tools"
If you don't find the answer with this tools, post us some css from your stylesheet
We're short on information here. We need to see your CSS for an accurate answer.
Either way, if you log out, is the margin still there? I'm pretty sure it is. I actually think you're having a margin-top or padding-top on your container/header/whatever element is on top.
If there is no margin, then your CSS is probably interfering with the admin bar. You probably set a margin-bottom on an element that matches either your class, tag or structure of the admin bar.
If you still don't see anything, there is a very slim chance that it could be browser-related. If the other solutions didn't work, try adding a CSS reset.
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.