I am a WordPress beginner. I want to insert css code into an article but i am getting a too big lines size.
I wrote this in wordpress :
[sourcecode language="css"]
#button{
font-weight: bold;
border: 2px solid #fff;
}
[/sourcecode]
I want something like this :
WordPress's source code generator uses tables for its layout, so if you have any CSS that affects arbitrary table elements then it will affect the layout of your source code too.
Related
I have an anomaly. So, I'm trying to edit\remove the background in the .site-header-main of my of a site. I edited via theme editor however, seems that such is not taking as the code is in the index file. Here is the website: https://retrocarsales.com/
Code in theme CSS after change via style.cc and\or theme editor:
.site-header-main, .site-description, .site-title-text a {
background: none;
}
.site-header-main {
border-bottom: none;
}
Code in (Index):258 when inspecting:
.site-header-main, .site-description, .site-title-text a {
background: #444444!important;
color: #ffffff!important;
}
.site-header-main {
border-bottom: 1px solid #444444!important;
}
NOTE: The code above is NOT found in Domain\WP-Content\Theme\index or in Domain\index I only find the related code in domain/wp-content/themes/theme-name/style.css in which there its good but its not executed on live site ... seems the site gets code from index not style.css
Thank You
You should never direct edit the theme's file if you are not a developer - this may be break your site or even make your site down if you make mistakes.
Instead of that, you can safely add your custom CSS by go to Appearance > Customize > Additional CSS (remember to add "!important" to overwrite current CSS rules).
See below image for more detail:
I am building a site in Wordpress this week and I want to place a call to action at the top of the the site, but separate from the main navigation. Wordpress does not seem to offer this out of the box (think Donate button on Unicef site e.g.
I've tried using the Menuizer plugin it can add a button, but it places it at the end of the navigation, so that it is still wrapped up in the hamburger on mobile, I want it to appear as a seperate item like on (for example, unicef.org)
I don't also mind coding it by hand, but I don't really know where/how to do that.
Thanks for any pointers
First, you need to set a new header menu location, in my opinion, you better duplicate from the existing menu you have.
Second, you create a menu item which later you'll be using as CTA button, probably it will pile up the current menu location, or the position maybe not right.
Third, customize it using css to have proper positioning.
This is done directly from the template (If the template was created by you) But, something tells me that you are using a ready-made template then use the custom script
To insert the js code you ัan use https://wordpress.org/plugins/insert-headers-and-footers/ plugin or https://ru.wordpress.org/plugins/custom-css-js/
I can't see your html layout to help you with the selector, so try experimenting with this example:
<script>
(function($) {
let selectorOfContainer = '.mybox',
url = '#your-link',
className = 'my-btn',
btnLabel = 'DONATE';
let $mybtn = $('<a/>', {
class: className,
href: url
});
$mybtn.text(btnLabel);
$(selectorOfContainer).append($myBtn); // prepend, after, before
})(jQuery);
</script>
Then use css styles to style your button
<style>
.my-btn {
text-decoration: none;
display: inline-block;
padding: 10px 20px;
border-radius: 3px;
background-color: #FFF;
box-shadow: 0 0 4px rgba(0,0,0,.3);
color: #e25420;
text-transform: uppercase;
font-weight: 700;
}
.my-btn:hover, .my-btn:focus {
background-color: #f0eded;
}
</style>
It would be easier for me if I saw your site
I have a problem.
I am using Froala as a blogging tool for several of our companies websites. The problem is that when I start writing Froala text, it inherits its style directly from the website that it is in. For example, suppose my stylesheet is:
myStylesheet.css
p {
color: red;
font-family: comic-sans;
text-size: 20px;
}
and on my main blog site, I will create the following in Froala:
<p>Hello World</p>
And Hello World will be red, comic-sans, and 20px because of the Stylesheet.
But what if I want to put this blog post on another website with a different stylesheet? How can I preserve the red, comic-sans, and 20px? Is there a way I can have Froala inline these things into the HTML?
There would be two approaches.
First approach:
Froala Editor requires wrapping the output HTML with a <div class="fr-view">HTML_HERE</div>. Therefore, the best way would be to define those rules that you want to be preserved inside the .fr-view class:
.fr-view p {
color: red;
font-family: comic-sans;
text-size: 20px;
}
Another approach: Disable the useClasses option and this way you'd get the style inline. If you do this, you wouldn't have to wrap the output with the fr-view class, but you would still need to define the CSS rules as explained above.
Is it possible to customize the cell colours and notebook output such as dataframes in IJulia notebook (using julia). For example, in python, we could do
Python notebook
from IPython.core.display import HTML
css = open('style.css').read()
HTML('<style>{}</style>'.format(css))
style.css
table.dataframe th:not(:empty) {
background-color: #FFCCFF;
text-align:left;
font-weight: bold;
font-family: monospace;
}
table.dataframe tr:nth-child(2) th:empty {
border-left: none;
border-right: 1px dashed #888;
}
table.dataframe td {
border: 2px solid #ccf;
background-color: #f4f4ff;
}
From looking at the IJulia source, it doesn't seem like there's a method for updating the styles from within the package directly.
The simplest way to customize the IJulia CSS โ assuming you're using jupyter 0.4 โ would be to add your customizations to ~/.jupyter/custom/custom.css. If the directory does not exist, just create it, and your custom styles should load automagically.
Sourced from: How do I set custom CSS for my IPython/IHaskell/Jupyter Notebook?
This seem to work
file = open("styletableJul.css")
styl = readall(file)
HTML("$styl")
Jupyter permits rendering output with Javascript code in it. Using Javascript you can really play with the DOM (browser page representation) and achieve a different look. My mini-test example was:
In[356]: HTML("<script>tt = \$(\".output_prompt\"); tt[tt.length-1].style.color=\"green\"</script><em>hello</em>")
The result was:
Out[356]: hello
but with a green Out[356] (it has the output_prompt class). Getting the JavaScript code to change the styles might be annoying. It might also be possible to really include CSS style sheet programmatically using Javascript. You already have some default libraries loaded to help you (JQuery) - but I'm afraid I'm no Jupyter expert.
I just installed wordpress. I have created a post and I am trying to display a bit of text in a hightlighted textbox. Similar to the screenshot below. I can't for the life of me figure it out.
Do I need a specific plugin to do this ? or can I do it out of the box. I tried installing a plugin called "SyntaxHighlighter Evolved" which seems to work fine for PHP etc... but the below is plain XML and it just seems to bugger it up. Besides I only want to text to be highlighted I dont really care if its displayed as code or not.
Please help, I wil be so greafull.
According to the documentation, this should work:
[xml]PUT CODE HERE[/xml]
Here's the list of available languages:
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
found a way to get this done.
Wrap your code in the following
[p style="padding: 2px 6px 4px; color: #555555; background-color:
eeeeee; border: 2px solid #dddddd;"] CODE GOES HERE [/p]