How to introduce CSS rules in Tumblr environment without affecting the theme? - php

I needed few simple changes to the style sheet files and I successfully managed to make these changes offline through Google Chrome Inspector but when I tried every time to implement these changes on the Tumblr theme, the blog breaks down and becomes a big mess.
Can you guys tell me please how to tackle this issue? What's the right approach or the appropriate workflow to introduce such changes of this nature without disrupting the theme?
Thanks in advance for your time and cooperation.

Tumblr themes should have the ability to insert Custom CSS.
When inside your 'Customize Theme' panel, open the 'Advanced' tab (at the bottom), there will be a box that will allow you to add Custom CSS. Add the changes you'd like to make there.
If you don't see the changes, your theme might not be optimized to accept the custom CSS that you've entered.
Click on the 'Edit HTML' button and search for {CustomCSS}. If you can't find it, then you'll need to add the following code before the </head> tag.
<style type="text/css">
{CustomCSS}
</style>
That should do it!

Related

Wordpress Theme manipulation - Remove Widget Background

So I know this is a bit out of ordinary for me to ask a question like this, but for some reason I am just really having an issue grasping this.
My Problem:
I have a responsive layout theme for word press, its clean its pretty. When implementing Google ad-sense into a text/html widget on the right bar it over runs the widget size and over hangs on the right hand side.
My Question:
What will be the best method for getting my ad to look more uniform. Is there a way to select a single widget css? Is there a way to put a div inside that widget and select the parent css from that div? Should I go in and hard code it into the theme?
Additional:
The theme I am using has a built in child theme option which I have chosen to use. When I place the code into the child themes function.php it breaks the theme and displays what I enter as plain text to the screen. Adding opening and close php tags did not seem to fix this issue.
Well it appears once again I asked a question before fully digging my brain into this. Hopefully this will become something useful for someone else.
FIX:
It appears that wordpress assigns a unique ID to every widget that is created.
Created New Text Widget
Wordpress Assigns: text-1
I can now go into css and manipulate this widget directly.
#text-1 {
//do somthing
}
It's always best to avoid hardcoding WP themes as when they get updated your modifications might vanish.
Glad to see you figured it out, I was going to say that you CAN add a div inside a widget and give it a name, which might still be be better than use the WP assigned layer name, as that might change if you were to delete or re-add the widget.

Magento and Wordpress Joint. How do i edit a page manually or the CSS?

I am having problems trying to figure out how exactly i can edit a simple page of the website. I didn't initially create it so i am given the task of trying to understand someones code. So the problem is... i am trying to change the simple font colour on the front home page, but i cannot even find the CSS file on magento or Wordpress so i'm kind of confused. I want to change the white font colour to black.
Do i just log in with FTP and edit the pages manually on there? Please give me some information on how i can go about editing any pages at all.
Wordpress
Wordpress have /wp-content/themes/ for a directory which stores all instaled themes (downloaded or created by you). You can edit everything of a theme there. The default stylesheet file in wp's /wp-content/themes/[yourtheme]/style.css. Attention: this CSS file can import another from somewhere else.
Finding the style
You can find the ids and classes statements just positioning the mouse over the element that you want to discover what is influencing it, right button click and select Inspect Element if in Chrome or Mozilla. An add-on to help is Web Developer.
Possibly useful links: http://ithemes.com/tutorials/ ; http://mcbuzz.wordpress.com/wordpress-tutorials-complete-list/ ; http://themeshaper.com/2009/06/22/wordpress-themes-templates-tutorial/ ; http://line25.com/articles/15-tutorials-to-help-you-build-wordpress-themes
Web developer
Mozilla | Chrome
#edit Yes, you can edit via FPT or SSH connection ;P
In wordpress you should check in settings->reading what the front page is set to and css changes can be done in the theme folder wp-content/themes/theme_name/ and for magento the css is usually in /skin/frontend/package/theme/css. or somewhere close depending on the template.

How can I make a customizeable widget area?

I know that I can go and change my theme's style.css file to change the background color of my widget areas, or if I make a custom widget area, I can give that a specific class and thus a custom background image in the style.css, but I need to give the user control for a few widget areas.
I have searched and searched and have not found any relevant information. Does anybody have any idea how I could do this? I really don't know how to make a widget AREA customizeable, and I would really appreciate any pointers in the right direction or assistance that anyone can provide.
EDIT
To be clear, I know how to add a custom widget area to my site. I have no idea how to add a customizeable option to the widget area, rather than a custom widget. As far as I understand it, widget areas are a set thing, are they not? Any pointer to a theme that does this would be greatly appreciated, as all of my google searches only end up pointing me to how to create a custom widget area, rather than a customizeable widget area.
Check the following two links if it is helpful for you.
http://theme.fm/2011/06/tutorial-creating-a-twitter-widget-for-wordpress-91/
http://wp.tutsplus.com/tutorials/creative-coding/building-custom-wordpress-widgets/
My understanding of your question is that you are looking for a way to allow the client/admin to modify the widgets that are displayed on any given page/post (rather than modify the widgets themselves).
This is a problem I have tried various ways to solve, never adequately imo. First of all there's the option to create a widget area for each page dynamically. I've seen it in commercial themes, I've done it myself, it is not without it's problems as you can see here - Register new widget position moves existing widgets
There are plugins that can do this, again not without their drawbacks. This plugin;
http://www.codeandmore.com/products/wordpress-plugins/wp-page-widget/
http://wordpress.org/plugins/wp-page-widget/
Is great, I love it. BUT it does not work on custom page template, be aware (I've not looked at modifying to allow this, I've seen a post by the developers saying they have no intention of adding this).
There is this plugin - http://strategy11.com/display-widgets/ by the developer of the Formidable plugin, for me it makes the widget area far too complex if you have a lot of widgets and a lot of pages.
Finally there is what I ended up doing recently - using this code by Chris Coyier
http://digwp.com/2010/04/call-widget-with-shortcode/
To do my own custom code using the Wordpress function the_widget (http://codex.wordpress.org/Function_Reference/the_widget) to deploy certain widgets on a page by page basis.

How to style a single wordpress widget

I am using a newsletter plugin in http://coconutwaterblog.com. But i want to style that single widget with heading background as yellow.
Can anyone suggest me how to do this.
Thanks
Depending on how the widget is developed, it could be pushing the styles inline and not via CSS.
Use Developer Tools (such as Firebug) to determine where the current styles are coming from to determine where they need to be altered to achieve the desired result.
If able, you could then alter the theme style sheet to include what you wanted to do to the specified element.
After viewing your site, I had problems determing which widget you were attempting to alter. If ti's the "FROM THE BLOG" widget, the CSS would appear as such:
#omc-sidebar.omc-right ul.xoxo li#pages-2.omc-widget h3.widgettitle {background:yellow;}
And, after looking at the markup on the page, it appears those attributes come in to play on line 80 of the document itself, which means you're not going to be able to over-ride them with a style sheet. You will have to alter the code either in the plugin of the theme itself.

Edit elements of the RIGHT NOW dashboard in Wordpress Admin

I'm customizing the Wordpress Admin site to suite my needs and there are several things I want to remove and customize (menus, etc...).
I noticed on the DashBoard section called 'Right Now' there are several things I don't need there. For instance the CHANGE THEME button and the wordpress version and theme. I found in the source dashboard.php where these are rendered, but rather than edit the source, can I just make a function that intercepts and changes this so it doesn't render them?
I also want to remove the DISCUSSION section and some of the counts for CATEGORIES, TAGS, and PAGES.
Is there a way to go about this? Thank you!
Hmm I think I solved this myself, although I'm not sure correctly. Using firebug I was able to find the class names and element ID's of the version and CHANGE THEME button and the version and theme
I added this code in my functions.php:
function wpc_remove_admin_elements() {
echo '<style type="text/css">
.versions p {display:none !important;}
.versions #wp-version-message {display:none !important;}
</style>';
}
add_action('admin_head', 'wpc_remove_admin_elements');
This added some styling in my header to hide these elements.
Is there a more efficient way to do this or am I going to be ok? I still don't know how to hide some of the Content and Discussion counts in the RightNow dash.

Categories