I'm using TinyMCE html editor in my cakephp (2.5) project. When I use bullet points in this editor, it's shows underline with every bullet point. I used default TinyMCE settings with cakephp.
I attached sample screen shot. Is anyone has an idea to prevent this, thank you :)
It's strange that it would do that by default. I assume there is some other setting or CSS that's throwing it off, but either way, if you want to override it, you can use your own CSS for the TinyMCE content:
http://www.tinymce.com/wiki.php/Configuration:content_css
In case it helps anyone in the future. I've realised that tinyMCE copies the style of <p> to the bullets possibly in an attempt to make them look uniform.
Related
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I have a webpage using a wordpress theme:
The problem is: can you see the white space between the lateral menu and the text? and the white space between the text and the right corner? I want to delete it, like making zoom to the important part of the webpage.
Anyone knows how can I do it? what file and with what vars of the wordpress template I need to play to change this part?
I think you might need to specify your WordPress theme. Can you?
Do you mean you want to get rid of the side navigation or the styling?
if its the side navigation that you do love to get rid of i suggest you get the secondary menu turn off and for the white spaces i suggest you might need to have a little custom css to play with.
for the side nav i suggest you try this additional css to get the white spaces off
.site-navigation li{border-top:0;}
.secondary-navigation{border-bottom:0}
or you can install other css plugins such as simple custom css, css hero,etc
hope that will helps
I'm working on a web in Wordpress and I have some trouble with the footer. I have three widgets and in the middle one I want to put some social icons. I have tried with different plugins and the problem is the same: first icon shows great but next are showing a weird border and I have no idea how to modify.
Could someone pitch in?
Thank you!
It might be a css style issue. If the first icon looks right, maybe the styles only apply to the first because the icon html elements aren't having the same class or the css selector is wrong (something like icon-class:first-child).
I would check your Browser Dev Tools:
Check if the icon html elements are all having the same class.
If they do, maybe the icon file itself is just ugly. You can check the file in the dev tools by hovering the file URL. If that is the case, the plugin provider should updates the icons.
If the don't have the same css class, you should customize your css, maybe there is a way in the widget plugin.
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
The best way to display what I see is by giving you a couple of screenshots:
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr1.jpg
http://i150.photobucket.com/albums/s99/dc2000_bucket/scr2.jpg
The link above also shows the html/asp code.
The question is why am I getting that white line when I render content in the web browser????
PS. I'm using VS2010 (that I am ready to smash with a hammer...)
Images are inline elements.
Inline elements are rendered like characters.
Characters sit on a line.
There is space below that line for descenders (which you find on letters like g, j and y but not a, b, and c.)
That space is what you are seeing.
You could twiddle the vertical-alignment of the images or stop using layout tables
User CSS Reset, and everything should be solved. The reason you're getting the weird artifact is that, browsers by default apply some style on HTML elements. To nullify those default styles, designers usually use CSS Reset. A CSS Reset is a CSS file that tries to remove all default styles applied by browsers.
To debug your CSS margins and paddings, use Firebug with Firefox. Here is an image of how to do that:
You may be getting the browser's default styling here. I would recommend grabbing a CSS reset and seeing if that helps
OK, guys, I got the bottom of it. The following style should be added to the tag that hosts the image. I don't know why, but it helps:
td{ font-size:0; }
Thanks everyone for your help!