- This topic has 6 replies, 5 voices, and was last updated 10 years, 7 months ago by
.
-
Posts
-
Hi!
I think I understand CSS prety well now: I can get anything I want with the Firebug CSS editor on my website. BUT when I make the same changes on WP in the Genesis framework, something overrides my changes and nothing actually moves!!!
I am trying to make my website title look good. I have two possible solutions for this:
- Get the text title BLACK and NOT UNDERLINED (it is now red and underlined by default!)
- Or, get my image title the right size and appear how it should (right now, it zooms in the middle of it, cutting all the edges and making it unreadable)My website is masteryourstudentloans.com, and it currently shows the image logo too zoomed in.
I would appreciate any help on that!
http://masteryourstudentloans.com
Thanks,
JenniferHi Jennifer,
Could you share the CSS you have used to overwrite the underline in title?
Or give this a shot:.site-title a{ color:#000 !important; text-decoration:none !important; }Add this code to your custom css and let me know if it works or not.
If you want to use the image logo, you should ideally resize it according to theme requirements.
Thank you! I resized the image to the size of the appearing image (as opposed to 320x65 which i thought was the standard) and it worked!
I am curious about your code I had not added "important" I will give it a shot just to see if it works it would be great!
Dear Jennifer,
1) If you have made the changes in your css file, cleared your browser cache, and do not have any caching plugins like W3 Total Cache installed and activated, and you still cannot see changes you make to your css file, then your hosting company may be using caching technology on their server, which means you will have to wait for anywhere from ten minutes to a couple of hours to see the effect of changes you make to your css. You can contact your hosting company and ask them what you should add to your .htaccess file to prevent this server caching.
2) If you don't mind experimenting, you can try adding the anti-caching code explained in step 6 of http://www.ipserverone.info/programming/how-to-prevent-http-file-caching-with-htaccess/ to see if this will work.
3) To do this, retrieve your .htaccess file from your website server by using an ftp program. If you do not have one, FileZilla FTP is free, but there can be problems viewing the .htaccess file with it. See https://wordpress.org/support/topic/cant-locate-htaccess-files for some suggestions to remedy this. Other ftp programs and solutions for viewing your .htaccess file for retrieval are at https://www.rackspace.com/knowledge_center/article/locate-your-htaccess-file.
4) Once you have downloaded a copy of your the .htaccess file using ftp, save a copy of that original .htaccess file in a separate folder on your computer. it is a good idea to also create a new folder on your website server named something like "originalhtaccess" and upload a copy of the original .htacess file to that folder as well, for safekeeping.
5) In case you do not know how to do this, changes and additions to an .htaccess file must be made in Notepad, not a word processor. Notepad is included with your Windows operating system. If you find you do not have Notepad, you can download the free program Notepad++ and use it instead.
6) Once you have made the changes to your .htaccess file to prevent caching by your hosting company's server, upload the revised .htaccess file to your website server. If you then have any problems viewing your site or logging in, upload the original .htacess file again. If the changed file works, don't forget to upload the original .htaccess file again once your site is finished. If you have somehow lost or damaged it, you can use the copy of the original .htaccess from the "originalhtaccess" folder you created on your website's server.
7) Once your site is finished, you can then upload any caching plugin you want to use and activate it. If you make any subsequent changes to your .css file, you can go through the above process again.
8) Hope this helps! Good luck!
'Best regards, Suuzen Ty Anderson
http://www.lawmarkets.comI'm not 100% sure what your issue is, but I'm 100% sure I can help! As is, I see a logo that says "Master Your Student Loans", and it looks pretty good, not zoomed in, so I'm unsure of what you mean by that. I can't see the site in text form right now, as you have the image set, but I would advice you use the logo either way, as it just looks better.
One thing I have noticed, is that your navigation on the right side flows down a row. This is because of the defined width for the site header widget area. In your style.css, look for:
.site-header .widget-area { float: right; text-align: right; width: 450px; }The width of 450px is what's defining the max width available, which isn't enough given all of the menu items you have. What I do here, is define a % value, such as width: 50%, while giving the "title-area" a width of 50% as well, ensuring that no matter what the given area, each is allowed that %. You can do 30 / 70, 40 / 60, doesn't matter, as long as it adds up to 100. Feel free to use pixel values as well, keeping in mind you have 1200px to work with given your current design.
That aside, your actual issue hasn't been addressed, so let me know what your issue is, what theme you're using, if you have a child theme, etc. You should see any changes you make to style.css immediately (unless you have caching enabled, which I'd suggest turning off while building, or use an incognito window in Chrome), so we should clear that up too.
Hi Jennifer,
!important basically means that the style marked with it is important, ignore subsequent rules, and any usual specificity issues, apply this rule! So it will over ride the previous styling on the logo.
Also I have used the class site-title hence only the link with that class will follow the new rule.
Your image header not readable just in break point (I mean for tablet and mobile).
So, you must change the css code in media queries.If you want make readable image in your header, you must change this css...
Example:
.header-image .site-title > a { background-position: center top; min-height: 80px; }You can change 80px, dependent your header image height.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.