First of all, let me say that I am not a professional coder - I've done every change on my site bit by bit and I'm not sure I really get how I made some things work.
That said, I had posted what seemed to me two simple questions (for people who actually know what they are doing on the Wordpress forums and received nothing but a smart#ss remark that I needed to learn CSS. Anyway....
ONE I have changed the overall fonts on the site but I can't seem to get the body of a post - and it alone to change to a better font for reading. I have set up League Gothic as my main header, sidebar, homepage fonts but I need to change the font in the body of the post itself to something a little easier on the eyes. And every combination I try changes ALL the fonts or doesn't work at all. ANY good advice?
TWO I have image/text just below the banner on my site. There are two small icons on each side of the "navigation bar" I want all to be horizontally/vertically aligned but the two icons on each side appear just a little above the first line of text - and this shoves the bottom row of text onto the background image.
CAn anyone please tell me what I'm missing?
The site is thirdrailers.com
Thank you so very much...
(ALSO, There are other additions I will be making down the road - if anyone can refer a coder/designer I would be very grateful.)
1) You want to change the font for: #post-content p and also .recent-postwrap p, .main-postwrap p. This will change the interior pages and the home page, respectively. You can add: font-family: Arial or whatever fonts you'd like to use.
2) Quick fix, though not the best. On the images, add style that says for the left image: float: left; margin: 15px -20px 0 20px; -- adjust those numbers accordingly. On the right image, just change it to float: right; margin: 15px 20px 0 -20px;.
Hope that works for you.
Related
I am trying to emulate an "Instagram" style menu for a website for its mobile version. Everything is fine but the problem is that I have a little scrolling issue with the x and y axis in which there are a few pixels more than intended.
I would like to make it 100% fixed so no scrolling is triggered.
I would paste the code but as I am working with a commercial Wordpress theme I find it over-complicated.
The website url is:
https://www.galaventura.com
Thank you very much
Actualization:
I provide two screenshots to support my question. In the first one there is the current state of the navbar. In the second one, the result I seek. Don't pay attention to the unaligned icons. A third image is provided to synthesize my exposure and might make the issue clearer.
The texts in the anchor links (INICIO, NOSOTROS, etc.) breaks the layout. So set font-size to something small, for example 10px:
.ast-header-break-point .main-navigation li {
width: 100%;
font-size: 10px;
}
I have a Wordpress site. I'm using the Blank Slate plugin on top an installed Nirvana theme by Cryout Creations. I'm using it to create my homepage from scratch and will eventually switch to a blank theme altogether.
My issue is that have a 32px gap between my footer and the bottom of the page (I measured it). I have trawled online for the last week and tried every single solution I have seen to remove it (wrapping, negative margins, 100% body height etc. etc.), yet absolutely nothing has been able to remove this gap, and place my footer at the bottom of the page.
Rather than paste my code, I thought I'd ask if anyone is aware of Wordpress itself causing such an issue, or perhaps whether a plugin is capable of doing so? If so, is there a way I can identify the cause?
Link to site: https://nelsontrails.co.nz/8937-2/
Thanks in advance for any help, it would greatly appreciated!
You have margin bottom on article.page. Please copy the below code and paste it to Customizer -> Additional Css to get rid of that space.
article.post, article.page {
margin-bottom: 0px !important;
}
you got margin-bottom: 36px; in your article.post, article.page class in your css please remove it and the white space will be gone
I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.
new to the forum here-
I developed the Wordpress theme that I want to use for my blog- and it looks good on the test site: http://flashandshine.com/eyesofstyletheme/
But when I upload it to my blog: http://eyesofstyle.com/
the nav menu doesn't have the background color, isn't static, and isn't at the top. When you click a post and view a post page, the sidebar is right where I want it. I'm confused as to why it's pushed to the botom on the home blog page.
I was hoping to change this theme around and sell it as a template, but I can't have it moving the sidebars to the bottom! Can anyone help me out with this? I really appreciate it!
If you are looking to sell this, it will need some major overhauling.
Looking at the CSS, you have some very extreme oddities. The main one being that you are using margins to determine the spacing from the sides instead of making a main container which sets the width.
To get it looking sort of alright, change the #blogcontent to show this:
#blogcontent {
margin-right: 0px;
margin-left: 17%;
max-width: 40%;
float: left;
}
Overall though, you will want to change things around a great deal.
This is how you should really want your layout to be using a proper grid layout. Click here.
Its all stuff you pickup along the way though. Hopefully this helps push you in the right direction though.
I have a wordpress blog and by default there is basically double spacing between every line, leaving a white space, on the text widget. This has something with the theme, and after spending some time going through the coding I was unable to find it (I'm extremely new to coding and have been teaching myself...
Anyways, even using html codes to try and reduce the space have not really helped. Here is an image of the text widget that I'm talking about:
Image
And also, here's a link to my site tradingliberation.com. You can see the widget on the right side of the screen, with the label "Key Data Calendar."
Again, please keep in mind I know pretty much nothing when it comes to coding. Sorry for the ignorance and thanks for your help in advance!
Looking at the code, it seems that the result of your vertical spacing is line-height CSS property :
(line 755 in style.css)
#sidebar ul {
line-height: 24px;
...
To set line-height for just this small part of your sidebar, you can wrap the content in a div tag, to which you apply a desired line-height.
However, you shouldn't define line-height in pixels. Percentage value or EMs would be a better idea. In this case, you'd just change it to line-height: 150%;
To troubleshot this kind of problems you should use some kind of Web Developer tool. For Firefox, there's a native one, or Firebug extension. For Google Chrome and IE it's the built-in Code Inspector. You can switch them on by pressing F12 in the browser window.