Drupal Blocks/Widgets Width / Height Parameters - php

The site I am maintaining has bugs in the header and widget blocks. How do I change this?
Search bar is out of alignment with nav menu.
News and Events widgets overextends if too much text is displayed.
a. The news widget is from an automatic feed.
http://cafes.calpoly.edu
One error only shows in Chrome browser. In Safari I at least don't see the News widget over extending but the search bar in the main header navigation menu appears to have a distorted div in all browsers.
I am new to Drupal but am pretty familiar with Wordpress.
Is there a module I can download to enable me to fix this? If so, what code snippet could I use to establish the proper parameters for these blocks?

1) Option one reduce li font size if client is ok with it
font-size: 0.75em;
This worked for me and you the search bar was fixed.
2) Second option is to trim the text length. There is only so much u can fit in those tight cells.
abt the news widget I don't see anything wrong.

There is no "CSS" module in Drupal. To fix the issues you've mentioned you need to make small changes in the css files. To fix the search box aligment you should reduce the font-size of the menu items.
You will need at least ftp access to the site.

Related

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.

Make nav-bar stretch to fit content

I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
just update your css
CSS
#media screen and (min-width:768px){
.container{
width:100%;
}

Extend nav-bar out to fit content that is out farther

I have 2 pages for my site. One a forum, another is my homepage. I have the homepage all setup, but the forum will require a bit of modification to the nav bar. I have the nav bar from the homepage mirrored to the forum so that the styles match nicely, but I made the forum wider because the forum needs more space for content and tables. I have tried numerous times to do this, to no avail.
Since the forum is not a static page, I have put the homepage on JSBin instead. They both use the same exact nav bar. This is Bootstrap 3, by the way.
Here is what I want it to look like (sorry for not embedding in post, need 10 rep): http://i.imgur.com/dlXaOZ8.png
Here is the JSBin: http://jsbin.com/fexowifica/1/
I just need to know how to make that extend out wider like seen in the image, but it won't actually be applied to the homepage nav bar, it will be applied to the forum nav bar that is seen in the image.
Thanks!
Just seems that your nav.navbar is restricted to a 960px width, make that as wide as the content of the page (.container) and it should fill out. Since I do not have the url to the actual page it is just a best guess.

custom css styles from (within - inside) wordpress dashboard

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. :)

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.

Categories