MODULARITY LITE: adding custom logo/image
-
Dear All,
Can someone please confirm if you can in fact add a custom logo/.jpg image in the top left-hand corner
(where the simple text/blog link resides). I am using the free MODUALRITY LITE theme (from Graph Paper Press) on WP.com.I’ve read many “how-to’s” on this topic but they are all WordPress.org self-hosted templates. I could not figure out out to do it with or without the paid CSS upgrade.
I purchased the CSS upgrade and will not need it if I cannot in fact add an image here for some reason. Please help.
Thank you all for your support and time with this forum.
BTW I know in the FULL version of MODULARITY (which is the “parent” theme, not the “lite” version) you can easily do this and it even has a form or spot for it in the MENU – however that them is $99/year and this is really the only tweak I am wanting to do.
Thanks
-MK
The blog I need help with is: (visible only to logged in users)
-
This is a post on that exact topic. > http://wpbtips.wordpress.com/2010/06/24/modularity-lite-100th-theme/
-
Note that the post I linked to does not contain anything on CSS editing. It provides an overview of the theme which does already allow for insertion of a logo, and it contains a workaround for using the “Welcome message” option to create a header image.
-
Hi Timethief – thank you for your reply.
Yes – I am aware of that “WELCOME” option and that is not what I want to do – thanks.
I want a custom image, top-left, with the current header without the optional “WELCOME” message (which shows up underneath the header)…
Also with this “welcome” workaround, it will show up on blog front only.
Take care…
-
Hello there,
I didn’t know if you were aware of these or not and wanted to be sure you did know before you started your editing. Best wishes. :) -
I can take a wild stab in the dark and there is a 90% chance my stab will not work for you.
1. I need the pixel dimensions of the logo you want to put at the top or better yet, a link to the actual image.
2. Do you want to keep the text title and tagline?
-
Also, we cannot use themes from outside of wordpress.COM, so you cannot upload the pro version, even if you purchased it, and the CSS from the pro version would not work here. WordPress.COM themes are modified from the original to support the unique features here and to fit in with the restrictions.
-
SP,
thank you for your reply.
1.) I haven’t decided on the exact logo. No larger than 275px × 123px though. So any pic or logo will work to test for us…just need to know if it’s even possible.
2.) We do not wish to keep the text, possibly the *tagline.
*If this turns out not “do-able” the logo will have to be incorporated into the actual header, if that’s the case, we would want to delete the text AND tagline please.
3.) yes – I am aware that we cannot use themes outside of wordpress.com.
I did not want folks to confuse the [more enabled] Modularity theme (from Graph paper Press) VS the slimmed-down MODULARITY LITE, as they can look almost identicial.
And the image option is available w/the parent theme for a cool $99/year! ;-(
I was considering also if this is possible with a self-hosted site with new domain name etc. @ WordPress.ORG.
I would like to verify if the basic MODULARITY LITE would be tweakable to facilitate our wishes with a self-hosted .org theme/site, but no one seems to be able to verify….including G.P.P. AND WP.
Thank you for your time!
-MK
-
1 & 2. Yes this can be done, and the tagline can be kept, or incorporated into the logo, or whatever you want to do.
The navigation has to be moved down as it will overlap the logo image at the 275 x 123 size you mentioned.
This was a quick workout. The golden colored block is 275 x 123 exactly.
-
Looks like you figured it out!
1.) I know I will need to upload the final image first. And then use the location of that file URL to paste into the template/CSS file somewhere. We will need to know where and how to do that please.
If I do want the TAG, I assume I just delete that from where I originally entered that text in the basic blog template settings.
Question: if/when doing #1 above.
I will still want/need for someone to be able to click on the new logo and have that be the “home page” link as well (just as it is now). I think I read there is some code you will need to attach to and around that to achieve perhaps?
2.) If I keep a more slim version of the logo/text I think we can barely get away with the current TAB nav. location. If not, was there a way (with CSS) to move that down and or did you just do that manually for the example site please?
Lastly, my dilemma is whether this will work with the self-hosted .org version of WP. As I am seriously thinking about going that route. I have purchased the domain name.
Do you know if they offer the same type of paid CSS upgrade to tweak as well?
otherwise, is there any way you can please look here:
http://wordpress.org/extend/themes/modularity-lite
and snoop around a bit and see if it’s the same tweak you are doing above. I am sure, given with your experience you will be able to detect that very quickly! Someone mentioned they thought with this version you do not even need the CSS upgrade (which I am not really worried about if it works) to achieve the same result.
Thank you so much for all your help – you made my day!
Looking forward to your response, so we can try.
P.S. was this tweak you made with or without the CSS upgrade? I forgot to ask!
-MK
-
Lastly, my dilemma is whether this will work with the self-hosted .org version of WP. As I am seriously thinking about going that route. I have purchased the domain name. Do you know if they offer the same type of paid CSS upgrade to tweak as well?
See here for paid guided transfers to wordpress.ORG > http://en.blog.wordpress.com/2011/03/11/guided-transfers/
-
Thanks for the link – I’ve seen that.
I’m afraid that does not include custom CSS tweaking/personalizing your blog template – ha, that would be great if they did.
Anyway – I do not need help migrating over to a self-hosted .ORG site should I decide to do so.
I need to specifically know if I do that, is the *paid CSS even needed at all to achieve the same logo/image insert tweak that “The SACRED PATH” has figured out how to do above.
And I would like to know, PRIOR to migrating and switching over please…if anyone knows that or can figure it out. Thanks…
WP tech support referred me back to here for some reason.
-
1. I was using Firebug for Firefox, which allowed me to work realtime on the copy of the CSS for your site that was uploaded to my browser and then take the screenshot of the results.
I put the golden colored image into the #top” section of the CSS, which means that it was not clickable. It is a little tricky to get the image to be clickable because you have to keep the text title as well and then turn it transparent and overlay that element on the image. The problem is that most version of Internet Explorer do not recognize the transparent setting and will ignore it which means the text title will show over the image. There are some tricks that can be used though. What the actual trick will end up being is different from theme to theme.
The thing is with the code, I would rather wait till you have the image and then we can work through it with you. This would be what I used, but as I said, it is not clickable. We would have to work on that.
#top { background: url("URL of logo image") no-repeat scroll 0 0 transparent; }2. I used CSS to reposition both the tagline and the navigation bar.
I have not looked at the code for the self-hosted version of Modularity lite, but I assume it is substantially the same for the major page elements, so it would likely work just fine.
Once you go self-hosted, then you will not be seeking help here in the wordpress.COM forums. You will be asking over at http://wordpress.ORG/support/ as that is where the self-hosted version is supported. On theme issues, some theme designers have forums on their sites where you can ask questions about their themes, but in some cases you have to actually pay for that support.
Also, with a self-hosted blog, you have complete access to the CSS. You do not need any sort of upgrade. All you need is the necessary experience with CSS.
The new guided transfers that wordpress.COM is offering is a good deal. Do note though that when you go self-hosted you are taking on a good bit of additional responsibilities. You have to do all installations, all upgrades, all backups and all troubleshooting. If something goes wrong, you have to figure it out and fix it.
BACKUP, BACKUP, BACKUP!!! This is of serious importance. You need to do regular complete backups of your self-host installation which includes complete backups of the MySQL database. If you do not, and something goes wrong or your site is compromised by those gutter dwelling hackers (crackers actually), having a recent backup can save a lot of work. I’ve been called into more than a few situations where no backups were done and virtually nothing could be salvaged from the original installation and the site owner basically had to start over again from scratch.
-
Thanks for all the info.
Here is how to do it for self-hosted. Perhaps you can learn how to wrap
the link from these instructions and convert to the .COM way.—
How to add your own Logo or Header
have a look at the header.php file and find the following section:
<!– Begin Masthead –>
<div id=”masthead”>
<h4>/” title=”Home”><?php bloginfo(‘name’); ?> <span><?php bloginfo(‘description’); ?></span></h4>
</div>Delete the <h4> and <span> tags and replace them with a link to your logo like this:
<div id=”masthead”>
</div>
If you’d like that logo to link to your home page, wrap it in a link like this:
<div id=”masthead”>
/” title=”Home”></div>
————–
-MK
-
That really can’t help here because it uses PHP script and we do not have access to the underlying theme files (header.php) here and we have to use CSS “tricks” to accomplish this. Sometimes this even includes actually putting the image into a text widget and then repositioning the text widget up and into the header area. It all depends on how the theme is constructed by the designer. In some themes it is easier than in others.
-
OK, I tried out what you posted above and it worked. Thank you!
I’ve decided to not worry about the “clickable” blog title element though as that seems like it could pose some problems in other browsers and or require even more work on your part – so don’t worry about that for now please.
So I went in and deleted the blog title and tag [from within the GENERAL settings], so do you need to modify any of the above example if I am doing that please?
1.) The logo examples I am using need to be moved up vertically, if you could please let us know the additional code change to facilitate that.
2.) in case I need to move the top page Nav.TABS “down” (which is highly likely), I would also appreciate that separate code too.
3.) Now that the hard stuff is out of the way, and the *paid CSS upgrade seems to be working.
Here are a couple of easy ones for you:
the post COMMENTS is so small and is the same color as all the individual post TAGS. It get’s lost in the little horizontal black “frame” and lots of folks do not even see it or cannot figure out how to leave comments.
I would love to make that (perhaps slightly larger) and in BOLD FACE and a lighter color to make it more noticeable and some color or something that would fit within the “look + feel” of the blog. Recommendations please?
4.) I would like to have more space in-between individual blog posts, when you scroll down on the home page, they appear to be all jumbled together slightly.
Thank you so much for all the help here – I REALLY appreciate your time and expertise.
*Feel free to contact me directly from the URL as I have a “practice” site that is set to PRIVATE that I could invite you to if that would help.
-
For the title and tagline, you want to keep those at settings > general so that the search engines can still see them. We can hide them with the following CSS
#masthead h4 a, #masthead span { display: none; }1. To move it up, you will have to add a negative top margin to #top as below. You can adjust the value as needed.
#top { margin-top: -10px; }2. To move the nav down, use the following and adjust the value.
#top div.main-nav { margin-top: 40px; }3. Since they have not provided any ID or class for the comments link in the metadata, I see no way to change that. Sorry. Perhaps Hallluke will have a solution if he sees this thread.
4. Add this and then adjust the value as you see fit.
.content { padding-bottom: 50px; }Try the above and see how things go. It is always best to be able to see the site, and if necessary I’ll contact you and you can invite me.
- The topic ‘MODULARITY LITE: adding custom logo/image’ is closed to new replies.
WordPress.com Forums 