{"id":6997,"date":"2020-09-24T21:47:31","date_gmt":"2020-09-24T18:47:31","guid":{"rendered":"https:\/\/kifarunix.com\/?p=6997"},"modified":"2024-03-14T22:52:21","modified_gmt":"2024-03-14T19:52:21","slug":"create-scrolling-text-box-on-wordpress-newspaper-theme","status":"publish","type":"post","link":"https:\/\/kifarunix.com\/create-scrolling-text-box-on-wordpress-newspaper-theme\/","title":{"rendered":"Create Scrolling Text Box on WordPress Newspaper Theme"},"content":{"rendered":"\n

Hello there. Welcome to our tutorial on how to create scrolling text box on WordPress Newspaper theme. Do you have some large text that you want to paste in your blog content but it is gonna occupy almost the whole page? Well, before that, by any chance you are working on content writing and want to check for plagiarism in few easy steps? Check plagiarism checker by Writix.co.uk<\/a>. Alright, in this guide, you will learn how to create a scroll text box on a WordPress Newspaper theme using a custom css code.<\/p>\n\n\n\n

Note that, the guide has only been tested on WordPress Newspaper X<\/a> theme v10.3.6.1.<\/p>\n\n\n\n

Are you using WordPress and looking for a professional WordPress website builder? Look no further since Elementor can help you create beautiful pages<\/a>.<\/p>\n\n\n\n

Creating Scrolling Text Box on WordPress Newspaper Theme<\/h2>\n\n\n\n

Create Custom CSS code<\/a><\/h3>\n\n\n\n

To begin with, you need to create a custom CSS code to define the specifics of your scroll text box. “CSS<\/a> is the language used to style an HTML document. It describes how HTML elements should be displayed”<\/em>.<\/p>\n\n\n\n

Newspaper X theme provides an easy way of creating a custom CSS code from the theme panel settings. To access the Newspaper X theme panel settings, navigate to Newspaper > Theme panel<\/strong> tab on the left menu panel of the theme. This should open such a screen;<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, on the Theme panel, scroll down and click CUSTOM CODE<\/strong> stab. This opens up such a Custom CSS page;<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click Custom CSS<\/strong> to open up a box where you can write your custom CSS code. In this tutorial, the code we will be writing is for the scrolling text box.<\/p>\n\n\n\n

To create a simple custom CSS scrolling text box, below it the CSS code we used.<\/p>\n\n\n\n

The comments are put between \/* *\/<\/strong><\/code>.<\/p>\n\n\n\n

.scroll-box {\n    background: #001a33; \/* Text Box Background Color *\/\n    color: white; \/* Color of the text on the box *\/\n    border: 2px solid rgb(34, 34, 118); \/* Box border style *\/\n    height: 300px; \/* maximum height of the box *\/\n    padding: 15px; \/* Size of the space around the content *\/\n    overflow-y: scroll; \/* specifies what should happen if content overflows an element's box. *\/\n}\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Once done customizing your text box, click SAVE SETTINGS<\/strong> button.<\/p>\n\n\n\n
Creating Scrolling Text Box<\/a><\/h3>\n\n\n\n
Next, create your post content and insert a scroll text box. To create a scroll text box, you need to insert a custom HTML blog.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Click on Custom HTML to insert a custom HTML blog. Enter the following code to create your custom scroll text box on WordPress.<\/p>\n\n\n\n
<div class=\"scroll-box\">\nENTER YOUR CONTENT HERE\n<\/div><\/code><\/pre>\n\n\n\n
You can use other HTML tags such as <pre> <\/pre><\/strong><\/code> for a preformatted text. For example;<\/p>\n\n\n\n
<pre class=\"scroll-box\">\nENTER CONTENT HERE\n<\/pre><\/code><\/pre>\n\n\n\n
Below is the example Scroll text box of using preformatted text tags, <pre><\/pre><\/strong><\/code>.<\/p>\n\n\n\n
{\n  \"annotations\": {\n    \"list\": [\n      {\n        \"builtIn\": 1,\n        \"datasource\": \"-- Grafana --\",\n        \"enable\": true,\n        \"hide\": true,\n        \"iconColor\": \"rgba(0, 211, 255, 1)\",\n        \"name\": \"Annotations & Alerts\",\n        \"type\": \"dashboard\"\n      }\n    ]\n  },\n  \"description\": \"OpenVPN Server status using Prometheus and OpenVPN exporter \",\n  \"editable\": true,\n  \"gnetId\": 10562,\n  \"graphTooltip\": 0,\n  \"id\": 3,\n  \"links\": [\n    {\n      \"icon\": \"external link\",\n      \"tags\": [\n        \"openvpn\"\n      ],\n      \"targetBlank\": true,\n      \"type\": \"dashboards\"\n    }\n  ],\n  \"panels\": [\n    {\n      \"cacheTimeout\": null,\n      \"colorBackground\": false,\n      \"colorPostfix\": false,\n      \"colorPrefix\": false,\n      \"colorValue\": true,\n      \"colors\": [\n        \"#d44a3a\",\n        \"rgba(237, 129, 40, 0.89)\",\n        \"#299c46\"\n      ],\n      \"datasource\": \"Prometheus\",\n      \"fieldConfig\": {\n        \"defaults\": {\n          \"custom\": {}\n        },\n        \"overrides\": []\n      },\n      \"format\": \"none\",\n      \"gauge\": {\n        \"maxValue\": 256,\n        \"minValue\": 0,\n        \"show\": false,\n        \"thresholdLabels\": false,\n        \"thresholdMarkers\": true\n      },\n      \"gridPos\": {\n        \"h\": 2,\n        \"w\": 3,\n        \"x\": 0,\n        \"y\": 0\n      },\n<\/code><\/pre>\n\n\n\n
Beautiful, isn’t it?<\/p>\n\n\n\n
So, now that you have defined your custom CSS code, every time you need to insert the scroll text box, just use the relevant HTML element tags (<div>, <pre>, …) with the\u00a0class<\/strong><\/code>\u00a0attribute of the value of “scroll-box<\/strong><\/code>“, as per this guide.<\/p>\n\n\n\n
Enjoy!!<\/p>\n\n\n\n
More WordPress Tutorials<\/h3>\n\n\n\n
Restrict Access to WordPress Login Page to Specific IPs with libModSecurity<\/a><\/p>\n\n\n\n
Install latest WordPress with LAMP Stack on Ubuntu 20.04<\/a><\/p>\n\n\n\n
How to fix WordPress could not establish a secure connection to WordPress.org<\/a><\/p>\n\n\n\n
Install WordPress with Nginx and MySQL 8 on CentOS 8<\/a><\/p>\n\n\n\n
Install WordPress 5 with Nginx on Debian 10 Buster<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hello there. Welcome to our tutorial on how to create scrolling text box on WordPress Newspaper theme. Do you have some large text that you<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[121,292],"tags":[2326,2328,2324,2329,2325,2323,2327],"class_list":["post-6997","post","type-post","status-publish","format-standard","hentry","category-howtos","category-wordpress","tag-custom-html-for-wordpress-scrollbox","tag-newspaper-theme","tag-scroll-text-box-on-wordpress","tag-scrollbox","tag-scrollbox-custom-css-code","tag-wordpress-scrollbox","tag-wordrpress","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/posts\/6997"}],"collection":[{"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/comments?post=6997"}],"version-history":[{"count":17,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/posts\/6997\/revisions"}],"predecessor-version":[{"id":21507,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/posts\/6997\/revisions\/21507"}],"wp:attachment":[{"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/media?parent=6997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/categories?post=6997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kifarunix.com\/wp-json\/wp\/v2\/tags?post=6997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}