custom css styles from (within - inside) wordpress dashboard - php

I am looking to edit the css styles from inside the Dashboard inside of wordpress and NOT have to edit the php files if possible.
I know it is possible to edit at least some of the properties so my hope is I can edit all of them right within the dashboard.
MORE SPECIFICALLY
How can I change the css states of links and submenus of a custom class? For example the a:active, a:hover, a:link etc... and ALL OF THE SUB-MENUS to custom css as well?
I have included these pictures to show you what I am trying to do and the present results.
MY CUSTOM MENU INSIDE OF WORDPRESS
CUSTOM CSS INSIDE OF WORDPRESS
THE RESULTS

I am taking the time to give a little more details in gratitude for all the help I got on stackoverflow over the years, also giving a little more info for the newbies out there. We are all learning.
Here is what worked in pictures
I used Firefox and used "INSPECT ELEMENT". While on the page I did a LEFT CLICK and from drop down I chose INSPECT ELEMENT.
Then I clicked on the PICK AN ELEMENT icon, as seen in the picture and then I hovered over the element I wanted to edit, in this case a button in the menu. This gave me the class I needed to edit.
I went into my DASHBOARD in WordPress and made this change to the code. Finally I got the results I was looking for, which I also included in the same picture as well.
Although I have not figured out how to edit the sub-menus yet I believe I am on the right track and will figure it out.
HOPE THIS HELPS SOMEONE. :)

Related

Wordpress Parent-Child Pages Menu - background highlighted on list

I'm a beginner on the webdesign and coding area, so please bear with me as I try to make some sense in this question. So, I'm learning wordpress and trying to understand why some stuff is happening in a theme developed on school. The thing is: the sidebar menu, as you will see in the images, were done by a parent-child page system inside wordpress, and not by the menu tab on the appearance tab, where you can click and drag the pages and just activate the widget later.
how the menu is acting while hovering over the list parent-child:
As I'm trying to understand a bit more of what is happening, I have googled some things about this, but I still can't make much of what I learned. Anyway, I tried some things, but I'm still not there:
I tried taking the background hover from the list, and letting only the hover on a to work:
It kinda helps on what it was supposed to do, to highlight only the child item, and not the whole list, but the idea was to make the background hover to extend itself to the whole space that the "container" of that line's content have, just like it shows in the right part of the image_02. Now, would that be possible? In this case, would I have to get the parent highlighted as well, and not only one child at time? Or I can't get this result with this parent-child pages menu system?
Here's the site, in case you would like to have a look:
http://dadin.ct.utfpr.edu.br/
Sorry if this sounds kinda confusing, but thanks in advance anyways!

WordPress - bbPress full width issue

I am having issues with getting the bbPress plugin full width, - if I create a new page called 'forum' or 'forums', and put the [bbp-forum-index] shortcode in on that page, and make the page setting full width no sidebar it seems to work.
Now, when I click on the forum category itself, it makes the forum then go to the left side, roughly 60% of page, leaving the right side untouched with no sidebar.
I've tried width; 100%; under .bbpress-forums, didn't work.
I've tried creating a new bbPress.php page, with the full width page template code in it, it also didn't work.
Picture of my issue;
https://image.prntscr.com/image/MlelT-DGSpSlLet6tBTTkw.png
I apologize if my question isn't clear, or if I'm missing something so simple, just can't wrap my head around this... Note that I don't know a whole lot about code but I know a little bit.
If it's any help, I am using;
bbPress v2.15.4
and Socialize by GhostPool as the theme.
EDIT: I've gotten half way! I've set "no sidebar" as the default option... now this is where I am stuck! https://image.prntscr.com/image/HONffga5SYq3DA6wi_CcxA.png
Can you provide the link to the website? As far as I can see on website for Socialize: Multi-Purpose BuddyPress Theme author sad that that he provided large, full-width and full page theme. Maybe you missed some option or just need some CSS tweak.

How do I use an Inspector to find the HTML in a theme's PHP files?

I'm working on a Wordpress website for someone and I have a question. I used an inspector (firebug) to check out the html of my site but I need to know where to find that bit of code in the Wordpress theme (Spacing) php files. There's no search all feature and going through all of them separately is ridiculous.
I really appreciate any help you can offer!!
I found an article on it (https://wordpress.org/support/topic/search-through-php-files) but there really wasn't a solution. If I can find what I'm looking for in the HTML (it's a menu name by the way), why can't I go find it in the theme files??
I don't know if this matters but the HTML is a body class to a couple of div classes to a ul id to li id to an a class.
WP does not contain ant HTML page. Everything in WordPress php file. If your page is created in page section you have to check in page.php file in /wp-content/themes/{your theme name}/page.php or if your page is posts you to check in post.php
What you want to change in WordPress site ?
If you go into the back-end/admin section and click "Pages". Find the page you are working on and click edit. In the "Page Attributes" you can see what "Template" it is using.
Then you can find that template in /wp-content/themes/yourtheme/
EDIT: More than likely the header and navigation is located in the "header.php" file in the themes folder.

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.

Edit WP html code, but cannot find the page

I am new to Word Press and I have been assigned to change something at work in our homepage.
I am always worked with raw HTML/CSS/php files, so I am a bit out of place here.
The page in question is the following: GAN Integrity Solutions Products
Inspecting the html I found where the CSS is (in the theme folder).
If I go in word press under pages, and I choose Products (which is the page I want) there is not content in it even in the text or visual editor. (but the page does indeed have content)
I installed the plugin called "Always edit in HTML" but it only removes the Visual tab and does not really replace it with the HTML tab (like I have seen a friend of mine has).
Also I am currently using WP v. 3.7.1 and I have not update because I still had to learn what happens when one updates (does it screw up my site? I can't afford to screw it up).
Anyone have any idea of what I am doing wrong or how I can solve this?
Btw the different "products" are created individually under "Portfolio" but what I would like to edit is that first link page html. What I need to do is instead of having pictures in the "squares" and then text as ones mouse over them, the reverse.
I would appreciate it!
Can you try to login in Wordpress?
You should go to pages and search for the product page.
Then check the template part.
Go to your themes map again and search for that template.
Your code should be there.
This is my first comment. Hope it is helpfull.

Categories