I'm working on my school newspaper's wordpress website, and I'm trying to indent the content of the rotating tweets widget by 15px. I've tried adding the following code to the wordpress theme editor's style.css sheet, but it hasn't made any noticeable changes:
.rotatingtweet{padding-left: 15px;}
When I add the same line of code in google Chrome in developer mode, it has the desired effect, but I just can't get it to work by editing the website's main style.css file in the "Voice" wordpress theme.
Thanks for your time!
-John
The tweets are displayed with position: absolute within their container, so they ignore the padding.
Put the padding on the outer div instead, then adjust the header:
.widget_rotatingtweets_widget {
padding-left: 15px;
}
.widget_rotatingtweets_widget h4 {
margin-left: -15px;
}
EDIT: The above, with additional tweaks to borders and such, will work, but there may be a slightly easier solution.
Instead of using padding, give the rotating tweets container a left margin. In your style.css file (probably line 102), there is a selector:
#content .rotatingtweets,
#content .norotatingtweets {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
margin-bottom: 3%;
}
If you change this to:
#content .rotatingtweets,
#content .norotatingtweets {
margin-bottom: 3%;
margin-left: 15px;
}
and move the borders to the elements just before and after the rotatingtweets container:
.sidebar .widget_rotating_tweets .widget_title {
border-bottom: 1px solid #DDD;
}
.widget_rotating_tweets .follow-button {
border-top: 1px solid #DDD;
}
This seems to accomplish what you want.
Related
I need to make this plugin for WordPress "post and grids"(https://www.wponlinesupport.com/plugins/) look like the screenshot below. I want to get the WordPress plugin to display in a grid with borders like the example.
My current plugin with my CSS code https://katekeileydesigns.com/wp-content/uploads/2019/05/Capture.png
The example I'm trying to recreate https://katekeileydesigns.com/wp-content/uploads/2019/05/Capture.-2PNG.png
!
This is the custom CSS I've added already:
.pgafu-post-grid-content {
border-left: 1px solid rgba(130,127,127,0.41);
padding-right:-50px !important;
border-bottom: 1px solid rgba(130,127,127,0.41);
padding: 2px;
padding-right:2px;
}
#pgafu-post-filtr-1 {
border:1px solid rgba(130,127,127,0.41);
padding-left: 15px;
margin: 20px;
}
.pgafu-post-title {
text-decoration:underline;
text-decoration-color: blue !important;
}
When I use the following CSS, I go from the output of the image at the top to the image at the bottom:
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
The purpose is to have a larger hover area for the mega menu, otherwise the mega menu disappears when the mouse is between the ''Assessment'' menu and the mega menu box. However, when my padding is at 30px, all the menu items shift higher up. What would I need to add to keep this large box (the edges will be white - I put black so it is easier to see now) without affecting the rest of the menu?
edit1: the menu is generated from the pearl theme for wordpress. The .menu-border is an added css class for the ''assessment'' menu.
If we could get a working snippet it would be easier to help.
Also, there are two menus in your capture. I guess that adding the code it's the second one. Looks you're missing vertical-align property
.menu-border {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
vertical-align: middle;
}
I'm unsure what you're exactly looking for but have a crack at this CSS that's using the inline-block property -
.menu-border {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}
Further reading on CSS inline-block
https://www.w3schools.com/css/css_inline-block.asp
If someone ever face that problem, the solution was to replace my code with this
body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}
I have been working on this problem for days now and I just can't seem to find the answer.
I am using Drupal 7 and I am trying to use E-junkie's shopping cart in one of my blocks on the frontpage. The pop-up overlay and etc. are fine but apparently my Drupal theme's CSS Styles is overwriting that of my shopping so it comes out wrong.
This is the website that I am working on: http://eastwestcards.com - Under the big View Cart button there is an Add to Cart button that you can use to add a free product for the sake of being able to see what I mean by the shopping cart coming out all wrong. My checkout button is all the way to the left and if you click an empty space at the bottom it actually sends you to checkout, the item lists and the rest of the tables have no borders or cell spacing/padding and a few other things.
Now this site on the other hand is how my shopping cart should like: http://pixilate.com/fonts/gardenia-px - Just click Add to Cart for the product and you will see the different between my cart and that sites'.
I have been looking for help all over and I've tried everything that has been suggested to me, I have tried exempting the cart's design from my CSS stylesheet, I have tried overwriting my drupal theme's CSS and etc, I've even tried using the View Source Chart plugin for firefox to try and determine which tags and etc. I should be trying to fix in order to change the appearance of the shopping cart on the site. I used the View Source Chart plugin because viewing my page's source normally doesn't show the HTML code for the shopping cart pop up because it is a javascript code that is provided by e-junkie that I simply put on my site. I am fairly new to all of this but I have really tried my best to fix this problem and I hope someone will be kind enough to help me! Thank you in advance!
I made this change "border-collapse: separate" and "border-spacing: 2px" and i also added this stuff at the end of my css stylesheet, some of it works, some of it doesn't but it seems to look okay now:
#EJEJC_window table {
background-color: white;
!important;
}
div#EJEJC_iframeContent td
#EJEJC_iframeContent div {
border-width: 3px;
border-spacing: 20px;
border-style: solid;
border-color: green;
border-collapse: collapse;
background-color: white;
!important;
}
#EJEJC_iframeContent th {
border-width: 3px;
border-spacing: 20px;
border-style: solid;
border-color: green;
border-collapse: collapse;
background-color: white;
!important;
}
#ejejctable table {
font-family: arial;
font-size: 12pt;
background-color: white;
border-style: solid;
border-color: white;
padding: 4 px;
!important;
}
#ejejctable th {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable td {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable tr {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#ejejctable tbody {
border-width: 4px;
border-style: solid;
border-color: white;
padding: 4px;
!important;
}
#tdHeader { padding: 25px; !important; }
td#tdPmntOptions tr { float:right; !imporant; }
#tdPmntOptions tr { float:right; !imporant; }
img#btnEJ { float:right; !imporant; }
#btnEJ { float:right; !imporant; }
If you look at this screenshot, you'll see what the problem is. The blue area is your link tag, and the checkout button is actually just an image that's rattling around in all that empty space. Clicking the white area takes you to checkout because as far as the computer's concerned, you are, in fact, clicking the on the link tag (just not on the image that a human user would expect to click on).
The quick and easy solution is to just give that link tag "float:right". Apart from positioning elements, the float property also makes containers "shrink wrap" around their contents. In this case, your link tag will shrink down to the size of the button image.
You could also give the link tag a fixed width and height, but the float solution is more flexible.
Hope that helps!
EDIT: Just spotted that element.style.css is setting a tags to "display: block". There's your problem. Change that to "display: inline" and it should behave normally.
As for the line spacing on the table, style.css is setting border-collapse to collapse and setting border-spacing to 0. Changing those to "border-collapse: separate" and "border-spacing: 2px" should fix it.
At the moment, I'm building my own Wordpress Theme. Amongst others I have a problem with the widgets... i want them to have a border (CSS) but it wont work. I tried everything, from different paddings to different margins. I mean its just a border... can it really be that hard?!
URL: http://www.biggaa.de
Search for this section in your CSS
#sidebar li {
list-style-type: none;
margin-top: 5px;
margin-bottom: 5px;
text-align: left;
border: 1px #CCC;
background: black;
}
You need to change the line that says
border: 1px #CCC;
to
border: 1px solid #CCC;
Also, change to color to whatever you desire. Your widgets also use the CSS class "widget" so you could try doing this as well:
.widget {
border: 1px solid white;
}
I would recommend using Chrome's Developer Tools, or Firebug for Firefox, and inspect the element of the page (right-click then inspect element). This will allow you to focus in on areas of your website you want to change, without having to dig through all the CSS. Good luck!
I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.
The CSS is literally this: #donate {border:1px solid #299ae5;}
As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.
Does anyone have any insight about this???
Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)
<li><span>Donate</span></li>
And here's the CSS:
li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }
Thanks in advance!
I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/
Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.
jsfiddle makes testing stuff easy.
If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/