I'm trying to use a custom font on my blog which is I haven't make it work yet. Maybe you guys can help me out on this.
I just want my blog title to have its own font. here's the HTML structure
http://prntscr.com/curez2
First thing I did was I uploaded my ttf font in my asset folder
http://prntscr.com/cura4a
Next, import the font in CSS "main_style.css"
http://prntscr.com/curfro
here's the class on my blog-title
http://prntscr.com/curgr8
did I miss something? can someone help me out please. thanks!!
You need to include the full path to the .ttf file on http://prnt.sc/curfro
It looks like you have everything right, however not seeing a live example makes it a little hard to isolate. But there are a few things to consider. For example:
Did you try publishing the site?
Are you ONLY trying the Blog Title?
IF you have set your Font Settings for the Title and Blog Post
Title, to a specific font, it's going to override the Theme's design
and your custom Font. In that case edit the Font Settings and choose
"Default". Then try to see if it works(dont forget to publish). See: https://hc.weebly.com/hc/en-us/articles/201505666-Edit-Fonts
Is the 'Content Area' a div with an ID of content <div id="content"></div> (IF not that could be the issue.) Note: #content h2.blog-title could also be written as .blog-post .blog-header h2.blog-title
Have you tried a different font file(try a different font type/file)
With that, you should at least be able to isolate the issue, if not resolve it.
Related
On the add/edit post screen, I don't have all the font sizes available. Can someone suggest how to enable a font size of e.g. 16pt ?
See this image
I'm using TinyMCE Advanced.
Thanks in advance!
You could do it in the CSS of your child theme if you want to, in a custom CSS panel if your theme supports it or even directly inline in the WordPress editor but that is not highly suitable.
I read a bit and it seems to be a init file that handles all the custom font sizes and other font tweaks. it should be the: tinymce.init
Or follow this article:
https://community.tiny.cloud/communityQuestion?id=90661000000MrZkAAK
And this
https://support.tiny.cloud/hc/en-us/articles/226914348-Styling-font-sizes-in-TinyMCE
could anyone tell me if it's possible to make all these(in picture) wp-default links with class .wp-embed .post same height so that it won't look horrible like in picture.enter image description here I know that it is programmed so that the height addapts to text size inside it.
How do i do that, i can't find they way how to overwrite that with CSS. Is it only achievable by PHP / if so how - i can barely read PHP for now...
There are two separate questions here:
How do I change the css on a wordpress site?
The answer is that it will depend on the setup of your site.
-- You may have access to edit the css for the theme by going to Dashboard -> Appearance -> Editor and then finding the style.css
-- You may also have access to edit the css file through manually editting the file on the server.
-- if those first two options don't work, and you are able to add plugins, you can add a plugin to let you add css to the page. Simple Custom Css is one such plugin.
How do I fix this particular css problem?
To answer this question I would need to see more of the css and html for this page
I am not a programmer. The language is foreign. I am creating a WordPress website. I created a child-theme.
I read the theme documentation. Understood very little.
sent an email to the theme owner. No answer (2 weeks ago)
searched the web - found many websites - i.e. http://www.w3schools.com/ - http://css-tricks.com/sans-serif/ & others - me, no speak the language. Can you place html code in a CSS file?
The child-theme consists of a new style.css file. The top section of the style.css file is what was needed to create the child-theme. Then there are color changes which I inserted & that has gone very well.
Changing the font family is confusing. Poking around the parent theme and also using 'Firebug' the font(s) seem(s) to be ('inherited'?). .genericon, 'Roboto Condensed', Sans-serif, Arimo, Arial and a few other standard MS Word fonts. I saw on the Google font site a couple of fonts I would prefer to use for my website.
How do I (or even can I) download the Google fonts to the Style.css file?
What do I need to insert in the child style.css file to override the parent fonts?
In case this is important, the theme has more than one template (PHP?) option. I am using W7 OS.
The Google Fonts site is really direct and helpful.
In your example, you mention Roboto. Here's the page for that font.
You would check the varieties of Roboto that you want to be able to use on your site under Step 1.
Step 2 allows you to select additional character sets -- for example if you were likely to be displaying text in Russian.
Step 3 gives you three ways to "enable" the font on your site. You'll be placing a line of code somewhere, telling users' browsers to go and get the font from Google when called for. The easiest way to do this is probably the #import option. Copy and paste the code under that tab into your style.css at the top (that's important -- it should go before any of the stuff describing the layout or type on your stylesheet). Your sub-theme likely has a bunch of other #import lines up there already.
Step 4 shows what specifically you need to tell your stylesheet to look for.
Good luck!
External style sheets have the highest hierarchy, so just specify your styles with the id, class or element name.
Google is your friend here.
To use google fonts, go to the google font page and search for your font with the search box on the left, then click add to collection. Once in your collection, go to your collection and click "use".
You should get an "#import()" code, place this at the top of your external sheet.
Currently I'm working on magento go. Its not just like Other magento CMS. Its a online CMS where I can manage my store. I need to change the home page design. I have tried to edit CSS files but it doesn't give me the desired output. I want to change the whole page design and want to add my one. Basically I don't get the way to edit the header part. The built in header editing section is known to me but I want to change the whole header part. Am I permit to do this in magento go? I have the html and css file but can not integrated the file in magento go. Is there any solution? Is there any place in magento go to edit phtml file? I need it very badly.Please HELP.
Thanks
Waiting for your reply.
There is a great video series called Magento Community Tutorials on how to customize every aspect of Magento. Link below:
http://www.youtube.com/playlist?list=PL3B0BAAF482B16EAB
However, as I only have the community edition, I am not sure if you can access Magento's server for Magento Go to customize to the level that you can with the Community edition.
Are you able to access all of the files and folders of Magento Go? For example, can you access the server's root folder and see something like this:
If you can, then the video tutorial series will answer all of your questions.
I am not sure if that works. The videos you gave are for magento community version, where you can actually access the FTP of your webhost. Magento go is "server-based" you cannot access the ftp files. I've been having the same problem as pavan.
But I had some level of success in changing some properties in the header portion... well, Header-container actually.
In your CSS Editor, type these code:
.header-container {
background: #FF6666}
This changes the color of your header to a rosy red color. Change the background value to your desired color.
with the other elements, I'm still looking for their classnames, here are some changes I made in my header
.top-cart .block-title strong {
display:block;
padding-right:10px;
background: url(../images/bkg_header-panel.gif) 100% -71px no-repeat ;
font-size:10px;
color:#565051;
font-weight:bold;
text-decoration:none; }
this changed the color of my cart(#) text.
I know this is not much but I hope it helps
Okay, Here is a new way I just found. This method allows you to put a picture in your header portion. btw, If you are using a background color (like I showed below/above), i'd advice you use a transparent bg on your pictures.
upload your picture. Go to Design > Themes Editor > CSS Editor. Click on the Manage button next to Image Assets. Click Browse then look select the picture you want on your header. Then click Upload.
Insert your CSS rules for your Header. The header portion is usually named header-container. So we need to make a css code for this. Type:
.header-container {background: url() ;}
You can add some more options in your background property in CSS. For more information in CSS, try CSS Background Property from w3schools.com
Place your image in your CSS rules. This time, we need to place the "image code" in your CSS rule. Place your cursor between the brackets "()" then Click Manage button in your Image Assets, select the image you uploaded (or the image you want to put in your header) then click Insert File
Again. I hope this helps.
I am using Octopress for my blog. I set up Disqus and it shows up on every article. However, I really need to customize the look because right now there is literally no space between the whole disqus comment box and the right border of the browser window.
I already tried to find the correct SCSS file but I couldn't find it. Can anyone help me?
I don't think there are custom styles for disqus anywhere in the default octopress theme.
I would add a new partial undess sass/partials say _disqus.scss and then import the file in _partials.scss
#import "partials/disqus";
for anyone searching for a good answer (I am sure #Vassilis works just fine): Just go to
octopress/sass/base/_layout.scss
In that file go to
section.comments {}
and add something like this (this align the comments with your blog text)
max-width: 500px;