i recently purchased a plug-in for my wordpress website called "pull out widget"
I don't like the font on the plugin. Is there a way I can change the font on it and use a Google font instead. any help would be appreciated. I tried to edit the plug-in but I don't know PHP that well. And I don't wana mess up the plug-in so I gave up.
You can change the font face via your theme's custom CSS – all pullout widgets are wrapped into a div with ID #pullouts. The custom CSS will overrule the pull-out-widget's css.
So just go into your custom css, and use Firebug or something to determine what class to call if you're unsure .... and of course this is assuming you downloaded the google fonts plugin -- http://wordpress.org/extend/plugins/wp-google-fonts/
Related
I am using demo version of Estore WordPress theme for my eCommerce site. and it is working fine yesterday. but when i open it today the homepage product slider height increases insanely long and other widgets are also not loading properly.
Url to site.
http://www.oriflamebeautyproducts.com/
Please help me to solve this issue because i can't understant that is it a theme issue or plugin issue..
The problem is probably with your theme. Your theme is the Estore theme.
When I compared the HTML content of the element <div class="big-slider"></div> I saw that alot of classes & inline styling was missing from the elements inside.
I guess the theme folder that is currently on your webserver is incomplete. With sliders its very common that javascript will add inline styling and classes to add the layout dynamically. I suggest you sync it with the original version. When the current website provided is the live domain I suggest you make a back-up first.
Info/Problem.
Using Sharepoint online with a dark/black theme.
On the homepage, I am using the document library previewer web part.
The font for URL's/Hyperlinks is defaulting to black so they aren't visible on the black background.
Attempting to change the font color of these URL's using CSS.
What I've tried
I've used the Dev Tools in Chrome to locate and change the CSS to make the font color white. This works, but the changes don't save after I refresh the page.
Downloaded and Installed Sharepoint Designer and copied the style element to a txt file stored in the style library. I'm not sure how or where to insert this file in Sharepoint designer to apply to to my site
The ideal solution would be editing the CSS for the homepage and then saving it permanently. I feel like I've gotten most of the way there, I just can't figure out how to save/apply my changes.
If it isn't already obvious, I'm not much of a developer so I'm a bit out of my depth here.
I don't think you can customize the css of existing webpart using designer. You have to create your own previewer using spfx. there are some webparts you can checkout.
Did you try to add the CSS style code into Script Editor web part in the home page?
If you use modern page, check the solution below.
react-script-editor
I can't seem to be able to find any information about this on the interwebs, but how do the icons in TinyMCE 4 work?
I know I can specify icons for buttons by name and specify custom icons for my custom buttons, but what if I wanted to take one of the standard icons, modify it in an image editing application and then save it as a custom icon. Where do I get the source image for that icon? Where can I see the full list of available icons and their names?
So, here is, possible, a partial answer to my own question or at least what I have managed to understand based on the poor documentation that currently exists for this aspect of TinyMCE 4.
Icons in TinyMCE 4.x use a custom IcoMoon font. The files for this font go in the skins//fonts directory.
If you download the TinyMCE Dev Package, you can find in js/tinymce/skins/lightgray/Icons.less all the icons that are available for that particular skin and you will be able to use those icons for your custom buttons (if you are using that skin).
You need to use the word between "-i-" and ":before". e.g. if the definition in Icons.less is:
.#{prefix}-i-alignleft:before
You can use the keyword alignleft as an icon for your custom button.
I haven't gotten as far as adding more icons to the default set, but I guess it would involve creating a new theme, hopefully inheriting from a parent theme, and defining your own Icons.less file and then process that LESS file to generate the appropriate CSS for your theme.
I am looking for the cleanest way to use css font icons that match my site's preexisting icon pack instead of having to create images to use in the plugin folder.
I am open to writing custom solutions as well as using plugins.
I'm not sure if they have to match them 1 on 1, or you just want to have the same type of icons as you had, but I recently ran into and implemented font icons from fontello.com that have many existing icons and supports custom icons if really needed.
I have just installed a custom WordPress theme (this is my first time working with WordPress, so I'm still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.
I went to the custom theme's stylesheet editor in the WordPress Dashboard and added the font via #import. So it currently looks like this:
/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#import url("http://fonts.googleapis.com/css?family=Questrial:700,400");
body { font-family: Questrial, sans-serif; }
But that didn't change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I'm trying to accomplish?
Thanks for anyone's help!
Well, it looks like you are implementing the font correctly.
Try using a tool like Firebug for Firefox or Google Chrome's built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.
If it's properly loading the CSS file, your problem may lie within CSS inheritance. Because of the 'Cascading' part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You'll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.
The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;