Search Results for 'css'

Results from the Forum
vexx
Participant
#0

Hello,

I made a child theme for Newspaper and I want to customize it for a bit. However, I can’t seem to find the css class for changing the height of the main menu bar. I spent the better part of today’s trying to modify this menu style and the height is simply not something I can modify at this point.

ps. I’m not looking for a theme option, I’m doing all the edits in the css/php side of my child’s theme.

Thanks in advance!

lazdim
tagDiv Member

Hi Simion,
I confirm that our website is perfect in Firefox 59.0.3
No, I did nothing to fix it and this is the strange part. I just woke up in the morning, opened the website and everything was fine.
My Firefox version is still 59.0.3
However, I have video cast which shows the problem we faced yesterday.
I don’t know what to say… Bad karma, maybe?

In any case, as a developer, I have to update the theme to the latest version.
I have made many customizations in WordPress “Add Custom CSS”.
However, when I updated the theme and pasted my CSS, the layout seems to recognize my CSS on same parts and ignores it to other.
I investigated further the case and I saw that you have change or added CSS classes.
So, my Custom CSS, even if it is pasted as it was, doesn’t work and I have to make the changes again.
This is a little bit frustrating since every time I will update the theme I would have to make many modifications to my CSS. And we are talking about 5000 lines of custom CSS… So, do you have any idea what should I do with this issue?

Thanks in advance.

mradamrothwell
Participant
#0

Hi i’m working through the speed optimisations and have put the following code in my ht access but i still get this error on gtmetrix

Enable compression for the following resources to reduce their transfer size by 1008.4KiB (89% reduction).

Compressing https://seekpretty.com/wp-content/themes/Newspaper/style.css?ver=8.7.4 could save 1008.4KiB (89% reduction).

please let me know what I need to do, On my last site I made a lot of changes and i cant remmeber what exactly i did. thanks

# BEGIN LSCACHE
# END LSCACHE
# BEGIN NON_LSCACHE
# END NON_LSCACHE
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

# BEGIN WP Rocket v2.6.11
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>

# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

<IfModule mod_alias.c>
<FilesMatch “\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$”>
<IfModule mod_headers.c>
Header set X-Powered-By “WP Rocket/2.6.11”
Header unset Pragma
Header append Cache-Control “public”
Header unset Last-Modified
</IfModule>
</FilesMatch>

<FilesMatch “\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$”>
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control “public”
</IfModule>
</FilesMatch>
</IfModule>

# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault “access plus 1 month”

# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”

# Your document html
ExpiresByType text/html “access plus 0 seconds”

# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”

# Feed
ExpiresByType application/rss+xml “access plus 1 hour”
ExpiresByType application/atom+xml “access plus 1 hour”

# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”

# Media: images, video, audio
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType video/ogg “access plus 1 month”
ExpiresByType audio/ogg “access plus 1 month”
ExpiresByType video/mp4 “access plus 1 month”
ExpiresByType video/webm “access plus 1 month”

# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”

# Webfonts
ExpiresByType application/x-font-ttf “access plus 1 month”
ExpiresByType font/opentype “access plus 1 month”
ExpiresByType application/x-font-woff “access plus 1 month”
ExpiresByType application/x-font-woff2 “access plus 1 month”
ExpiresByType image/svg+xml “access plus 1 month”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”

# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”

</IfModule>

# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g)$ no-gzip dont-vary
</IfModule>
</IfModule>

# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>

<IfModule mod_mime.c>
AddType text/html .html_gzip
AddEncoding gzip .html_gzip
</IfModule>
<IfModule mod_setenvif.c>
SetEnvIfNoCase Request_URI \.html_gzip$ no-gzip
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTPS} on
RewriteRule .* – [E=WPR_SSL:-https]
RewriteCond %{SERVER_PORT} ^443$
RewriteRule .* – [E=WPR_SSL:-https]
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteRule .* – [E=WPR_ENC:_gzip]
RewriteCond %{REQUEST_METHOD} GET
RewriteCond %{QUERY_STRING} =””
RewriteCond %{HTTP:Cookie} !(wordpress_logged_in_|wp-postpass_|wptouch_switch_toggle|comment_author_|comment_author_email_) [NC]
RewriteCond %{REQUEST_URI} !^(.*/feed/?)$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^(facebookexternalhit).* [NC]
RewriteCond “%{DOCUMENT_ROOT}/wp/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index%{ENV:WPR_SSL}.html%{ENV:WPR_ENC}” -f
RewriteRule .* “/wp/wp-content/cache/wp-rocket/%{HTTP_HOST}%{REQUEST_URI}/index%{ENV:WPR_SSL}.html%{ENV:WPR_ENC}” [L]
</IfModule>
# END WP Rocket

# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 5 seconds”
ExpiresByType image/x-icon “access plus 604800 seconds”
ExpiresByType image/jpeg “access plus 604800 seconds”
ExpiresByType image/png “access plus 604800 seconds”
ExpiresByType image/gif “access plus 604800 seconds”
ExpiresByType application/x-shockwave-flash “access plus 604800 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/javascript “access plus 604800 seconds”
ExpiresByType application/x-javascript “access plus 604800 seconds”
ExpiresByType font/truetype “access plus 604800 seconds”
ExpiresByType font/opentype “access plus 604800 seconds”
ExpiresByType application/x-font-woff “access plus 604800 seconds”
ExpiresByType image/svg+xml “access plus 604800 seconds”
ExpiresByType application/vnd.ms-fontobject “access plus 604800 seconds”
ExpiresByType text/html “access plus 600 seconds”
ExpiresByType application/xhtml+xml “access plus 600 seconds”
</ifModule>
# END Expire headers

<IfModule mod_deflate.c>
<filesMatch “\.(js|css|woff|html|php)$”>
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

Simion C.
tagDiv Staff

Hi,

If that is a page and theme block, note that the font settings available in the tagDiv composer can be different by device. So you can set a font size for desktop
https://www.screencast.com/t/BNzGapj9
And one for mobile – https://www.screencast.com/t/x1xjUvvAcxr
These settings are not available in WPBakery page builder.

If you use WPBakery you could use CSS to set differ font sizes by width, with media queries. An example topic
https://forum.tagdiv.com/topic/how-to-manage-the-fontsize-for-better-responsive-text/
https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Simion C.
tagDiv Staff

Hi,

So you would like to hide the featured image in the post page, when using the mobile theme plugin. That could be done by modifying the mobile post page template. Comment or remove this code from the mobile theme post template file
https://www.screencast.com/t/DckFD79Z

Or enter this code in Theme panel->Mobile theme->Custom CSS

.single .td-post-featured-image {
display: none;
}

Thanks

Simion C.
tagDiv Staff

Hi,

1. That is the page padding, similar to desktop but smaller
https://www.screencast.com/t/rgkmUFKzzT
It could be removed by entering this code in the theme panel advanced CSS section, in the phones and tablet fields
https://www.screencast.com/t/cca9VqHp7pPZ

.home .td-main-page-wrap {
padding-top: 0;
}

2. There is a setting for the mobile menu background color
https://www.screencast.com/t/mjju2gutkK

Thanks

Catalin
tagDiv Staff

Hello dallas,

You can hide category labels if you are using such a custom CSS code. Try to use the inspector browser to create your own code -> https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks for your understanding!

Simion C.
tagDiv Staff

Hi,

You will have to modify the post template files in order to do something like that. These are the post template files (they are located in the main theme folder)
https://www.screencast.com/t/8sl8viSg3B
In this example I will modify post template default as you mentioned. This is the section of code that displays the post author and other meta
https://www.screencast.com/t/X9xwW99oj
Move it above the tags if that is where you want the meta to appear
https://www.screencast.com/t/i3KKekvvQOlV
The result will be like this
https://www.screencast.com/t/D0FUa5LvUxsm
The design does not apply anymore since the code is now not part of the post header. Creating a new header around the moved code would be a solution
https://www.screencast.com/t/kMycoYEjKPh
Or style them with CSS
https://www.screencast.com/t/niqaihO7
This is the code that must be entered in the theme panel custom CSS section
https://pastebin.com/phxadSE2

Thanks

Catalin
tagDiv Staff

Hello kaisan,

Try to use the following custom CSS code.

The code is ->

.amp-wp-article-featured-image{
text-align: -webkit-center;
}

You should use a bit of CSS code if you want to change the AMP style page. Edit here -> https://www.screencast.com/t/vIUHFAbD6uRH There’s no option for custom CSS code for AMP version, sorry! You need to follow the above advice if you want to customize your AMP version.

Hope this helps!

Thanks for your understanding!

sasel57
Participant
#0

I want to customize some css you have in Newspaper theme the “style-woocommerce.css”
I have created the child theme and inside it tried both edit the code in style.css and copy paste the style-woocommerce.css in child theme ande dit it there.
The css iwant to customize has !important, which by the way is not a very good way of building css.
How can i edit it, concretely the css is:
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
font-size: 12px; (make it 15px;)
line-height: 21px;
border: 1px solid #ededed !important;(make it #982234)
background-color: #fcfcfc !important;(make it #f5cdcd)
box-shadow: none !important;
border-radius: 0 !important;
margin: 10px 0 20px 0 !important;
padding: 16px 120px 16px 60px !important;
}

marcel-2
Participant
#0

Hi,

i need help implementing CSS from an demo. I have an “Big Grid 1” with the default style(Grid Style 1). When you go to https://demo.tagdiv.com/newspaper_magazine/ then there is, for example the category(PHOTOGRAPHY), on the first Big Grid (women with camera), in an black box with withe font, also there is the author with the Date(David Lee – September 24, 2015). This is becaus of the CSS class td_module_mx5 and others. I tried to copy out this classes from Newspaper\includes\demos\magazine\demo_style.css and insert it into into live css, but nothing changed.

I don’t want to install a demo, i only want the CSS code to change the “Big Grid 1 / Grid Style 1” in the way its done at the News Magazine Demo.

Thanks a lot

Marcel

Prajwal Desai
Participant
#0

Hi,

I am trying to optimize my website to the best but I am stuck with few things. Could you tell me if there is any way to improve on the below things. The below lines are from gtmetrix results. I have read your optimization guide but that didn’t help much.

1) :path /wp-content/themes/Newspaper/images/icons/newspaper.woff?15 – This is taking 277 ms to load.

2) /css?family=Roboto%3A300%2C400%2C400italic%2C500%2C500italic%2C700%2C900%7COpen+Sans%3A300italic%2C400
%2C400italic%2C600%2C600italic%2C700 – This is taking 170 ms to load

3) https://fonts.googleapis.com/css?family=Roboto%3A300%2C400%2C400italic%2C500%2C500italic%2C700%2C900
%7COpen+Sans%3A300italic%2C400%2C400italic%2C600%2C600italic%2C700 – This is taking altogether 50 ms to load. They are multiple files with roboto and other google fonts which I am not using at all. I am using the default font provided by you guys.

Link – https://gtmetrix.com/reports/prajwaldesai.com/Pl3NPY1q

superflymarketing
Participant
#0

Hi guys,

We’re looking to reduce the padding below the header adverts. Currently there’s too much white space but we’re struggling to find how to reduce this using custom CSS.

Any help would be much appreciated!

For example see –
https://girllyf.com/taste/drink/you-can-now-get-alcoholic-tango-ice-blast-cocktails/
https://girllyf.com/taste/

rgomez
Participant
#0

Site is not showing I get this error, please help!

Warning: require_once(css-live/css-live.php): failed to open stream: No such file or directory in /home/betahs/public_html/wp-content/plugins/td-composer/td-composer.php on line 38

Fatal error: require_once(): Failed opening required ‘css-live/css-live.php’ (include_path=’.:/usr/local/lib/php’) in /home/betahs/public_html/wp-content/plugins/td-composer/td-composer.php on line 38

Arafat
Blocked
Show line - topic
#0

Hi, Today I add some CSS on my site https://forum.tagdiv.com/topic/widgets-5/ then Show line in the header: https://prnt.sc/jd7l6l

How to remove the line in the header.

Simion C.
tagDiv Staff

Hi,

Please provide a link to such a post with errors so we can test it with the validator, could be something entered in the post content or plugin content. Seems to mention the HTML tag “col”, maybe you have that in the post content.
Also our AMP plugin does not provide CSS errors anymore, all the known issues have been fixed.

Thanks

Simion C.
tagDiv Staff

Hi,

I remember testing that a while back and it worked, after making the update of the plugin today, it seems that the font color is not applying for some reason. Maybe this will be fixed by the plugin author.

You could use a code like this to chnage the text color to your desired one

.coin-container {
color: yellow;
}

Change the color to what you want and enter it in Theme panel->Custom CSS.

Thanks

kamoe
tagDiv Member

Hi Simon, thank you for a very well explained feedback!

I did change the style.css in two location to set the color “correct” to avoid this shift from blue to red. But I still get it. I cleared cache etc.

Can you take a second look please.

K

Derek Little
Participant
#0

Hi,
I’m using the Cryto Widget news ticker plugin with the Cryto Newspaper Theme.
http://blockchaintrailblazers.com/

I’m able to easily change the background color of the ticker in the ticker dashboard. But the text color will not change using the same tool.

Do I need some kind of CSS to override the news ticker?

Thank you!

Tosban1
Participant
#0

I have my main home page setup to show “Latest Articles” and on the far right hand side of each abbreviated post it displays the Comments icons with the number in the middle of it. Would like to remove this and replace it with the Post Views (one with eyeball) icon and number right next to it.

I’m assuming there’s some CSS code that could change this? Thanks.

AntoineVerdier
tagDiv Member

Great! But cannot find the category ID using webdev, is it the same as the one in the database?
Also what is the CSS for the category tag?

Thank you

Simion C.
tagDiv Staff

Hi,

That could be done with CSS maybe. For font awesome icons it is easy since all that has to be done is to insert the class and have the plugin active.

Maybe something like this
https://www.screencast.com/t/4PYfzC0k
This is the code I used in the example if you should consider it (change the menu item ID with your own)

.menu-item-1963:before {
content:'';
background: url("");
background-size: 15px 15px; background-repeat: no-repeat;
position: absolute;
width: 15px;
height: 15px;
top: 15px;
}

It may need further modifications to work in other situations. Or maybe you can find another method.

Thanks

Simion C.
tagDiv Staff

Hi,

Unfortunately at the moment that is not possible by a theme setting, once the option is disabled in the theme panel it will apply for all the posts. Maybe such an option will be implemented in the future.
There will be changes to how the post templates are created in a coming major update.

So at the moment you could only do that with code modifications maybe, or CSS code.

Thanks

Simion C.
tagDiv Staff

Hi,

1. You can try to regenerate the thumbnails, this process will recreate all the necessary thumbnails
https://forum.tagdiv.com/search/regenerate/

2. Depending on the page builder used, both have options to hide elements for specific device. A related topic here
https://forum.tagdiv.com/topic/change-moduleblock-12/
These are tested and work as expected. As a note, if you use WPBakery page builder to create pages, deactivate the tagDiv composer. The tagDiv composer may prevent the option to hide elements of WPBakery from functioning.

3. With WPBakery page builder that will not be possible. There are no options to color the block title fonts or background. The tagDiv composer has such options.
You could use CSS to color them by block type for example
https://www.screencast.com/t/hJiffmUYp
This is the code used in the example

.td_block_1 .td-block-title span{
background-color: red;
}
.td_block_7 .td-block-title span{
background-color: blue;
}
.td_block_4 .td-block-title span{
background-color: yellow;
}

More about using CSS code here
https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/

Thanks

Catalin
tagDiv Staff

Hi Marcel,

You should try using the following custom CSS code if you like that style! -> https://pastebin.com/ScVxBm7n -> https://www.screencast.com/t/69pAl1nG5p

Thanks for your understanding!

Viewing 25 results - 14,076 through 14,100 (of 33,436 total)