Typography [ our styles of design ] texts

Welcome on board!

Since you are here, we dare to assume, you are also not happy with the dull texts with the vague design that the Internet is full of. On our web portal in particular in the blog we provide you a set of flexible and powerful tools for text processing. With it help you can make your original material more "tasty" for readers.

We offer our authors a wide range of possibilities for texts design.

You as registered user, among other, can be able to add author's materials into the blog.

When you're creating / editing a material there is a button at the bottom of the edit dialog box named "RokCandy Macros" it contains all the most interesting part of the design.

So, let's begin!

Clicking this button will popup a dialog box with two drop-down lists:

TYPOGRAPHY > text

In the second drop-down list please select the option -"text".

In the window that appears on the left will be grouped so-called Macros (HTML-codes) we use now (as they will update / add a new ones this article will be supplemented).

You are probably thinking: I'm sorry, what?! Macros / html? .. Keep calm its quite simple - below we will explain each of them in detail, with examples. A few more slides, your coffee will not even cool down, you will already know the "base" and become a real guru.

Macros (examples)

number

"digits"

As you guessed from the title, yes it's about adding a numbering to the text. So simple and obvious it would seem an option, but do you remember where you saw it for the last time?.. It is advisable to use if there are many sections / media content you want to structure.

Syntax: macros where instead {text} you specify the number in format 01, 02 ... 25

Result:

number

additional information "info"

allows to add the word "info" in text. It also makes sense to better structure your material.

Syntax: macros where instead {text} specify one of two variants of the word "info" (there are two sizes - one large info and the second smaller one info-small) below are examples of their use:

Result large:

Result small:

additional information "see it"

allows to add the phrase "see it" in text. It also makes sense to better structure your material.

Syntax: macros where instead {text} specify one of two variants of the phrase "see-it" (there are two sizes - one large see-it and the second smaller one see-it-small) below are examples of their use:

Result large:

Result small:

your media here

blockquote

Citation. It seems to be a standard option, but we also made it more tasty.

Syntax: macros where instead {text} you specify quoted text. You can also highlight the author cited by you with an additional macro

Result:

I've missed more than 9 000 shots in my career. I've lost almost 300 games. 26 times I've been trusted to take the game winning shot and missed. I've failed over and over and over again in my life. And that is why I succeed. Michael Jordan, professional basketball player

HeroIcon

Allows you to emphasize the text in the form of: a separate large icon, or icons and part of the text with it.

Syntax: macros where instead {text} you can:

  • specify part of your text and it will also be highlighted -

    Result:
    important
    next here your text ...

  • or delete the field {text} inside macros, in this case there will be only the icon itself before the rest of the text

    Result:

    next here your text ...

read also

Allows you to make a link to other material (it can be both in our blog and external).

Syntax: macros where instead {text} you put your html-link

Result:

Read also Air flight on 1st (vip) class

Note: located next to it in the dropdown list macros as you probably guessed is for the russian version. If desired, you can also use it - our portal supports two language versions (russian and english). We provide you with a unique opportunity - to create materials in another language version of the blog, thereby significantly expanding your audience!

success

Allows you to highligth a block of text in green, meaning success, some positive fact / event.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

The Cassini spacecraft reconnected to the Earth after the first time in 20 years "dived" into the gap between Saturn and the rings. Currently, the apparatus transmits scientific information collected in the Result of the "dive", which was carried out on April 26. For this "Cassini" used a kind of trick - a gravitational maneuver near the satellite of Saturn Titan.

warning

Allows you to highligth a block of text in yellow, meaning attention, some fact / event deserving of such accent.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

Despite the fact that the mission members were confident in the safety of the maneuver, they took a number of precautions. According to the existing models, a narrow gap between the planet and the inner edge of the rings can contain small particles that would potentially endanger the machine, which rushes through them at a speed of 124,000 km/h.

error

Allows you to highligth a block of text in red, implying a danger, some fact / event deserving such an accent.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

Terrorism is not an issue about religion or ethnicity. It is against human nature and represents a common challenge facing mankind. Global counter-terrorism situation is now undergoing profound and complex changes. Terrorist activities, which are more extensive and intensive than ever before, pose serious threats to regional and international security and stability. No country could stay immune from the scourge.

info

Allows you to highligth a block of text in blue, implying that some fact / event deserve emphasis as the information.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

Earth otherwise known as the World (especially in geopolitics and geography), or the Globe, is the third planet from the Sun and the only object in the Universe known to harbor life. It is the densest planet in the Solar System and the largest of the four terrestrial planets. According to radiometric dating and other sources of evidence, Earth formed about 4.54 billion years ago. Earth's gravity interacts with other objects in space, especially the Sun and the Moon, Earth's only natural satellite.

info text-grey

Allows you to highligth a block of text in grey by reducing the font, meaning that some fact / event deserves accent as additional information.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

Earth's lithosphere is divided into several rigid tectonic plates that migrate across the surface over periods of many millions of years. About 71% of Earth's surface is covered with water, mostly by its oceans. The remaining 29% is land consisting of continents and islands that together have many lakes, rivers and other sources of water that contribute to the hydrosphere.

small-info

Allows you to select text by reducing the font, making it centered. It's advisable to use it as a description for a media file.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

description of your media file

PullQuote

Allows you to focus by moving the block to left, the main text will flow around it. Used, as a rule, for highlighting the SMALL part of the text (preferably up to 140 characters) to attract additional attention. In the mobile version on the smartphone it will be highlighted inside the main text (pls test it). Do not abuse - depending on the volume of the text, we recommend that you apply no more than 1-2 times in the material.

Syntax: macros where instead {text} you insert your block of text you want.

Result:

Here is simple text as an example. Wikipedia is a multilingual, web-based, free-content encyclopedia project supported by the Wikimedia Foundation and based on a model of openly editable content. Wikipedia is written collaboratively by largely anonymous volunteers who write without pay. Anyone with Internet access can write and make changes to Wikipedia articles, except in limited cases where editing is restricted to prevent disruption or vandalism. Users can contribute anonymously, under a pseudonym, or, if they choose to, with their real identity. Wikipedia is a live collaboration differing from paper-based reference sources in important ways. Unlike printed encyclopedias, Wikipedia is continually created and updated...

TYPOGRAPHY

3D-FirstLetter

A very effective way to literally revitalize the text! This macros allows you to make it animated (slightly open).

Syntax: macros where instead {text} You specify a letter. More than one character in one macros is better not to insert, because result can unpleasantly surprise you.

Result: Below are examples of the number of characters / words within one macros

A
wow
amazing

As you can see from the example, more than 1-3 letters, not to mention phrases, inside one macros it is better not to use.

OVERLAY

Allows you to insert a large media file (image / infographics / video / text) which for viewing is worth deploying in full screen. Works in combination of two macros - first one -body where the media file is specified, the second one (-nav / -see) Icon for better visibility. There are two icons options: -nav menu icon for text, -see eye icon for images / video.

Syntax: macros where instead {text} you specify the media file / text and additional macros or

Result:

×
full screen view

Note: if width of your image is less than width of the screen, add style="width: inherit;"

thus, in the above example macros -body looks like:

MEDIA > video

macros from the video section allows you to easily embed videos from a popular video hosting / news websites. From the drop-down menu choose the section "video".

Inside it, two subsections: phone (for mobile devices) and large (for desktop, laptop devices).

Important! We recommend to use both of macros -phone and -large for each media file at the same time (cross-platforms) this will allow a user to see your file on any device.

Consider the example on YouTube video host

instead {text} you specify part of the code for inserting the video which we take directly from the videohosting. We are interested in the part of the code after https://youtu.be/...

Syntax (for desktop, laptop devices): macros

Syntax (for mobile devices): macros

Result: check it works on both desktop and mobile versions:

MEDIA > Photo Slider

Allows you to add a spectacular photo slider to your material. Many options are supported, including the ability to add animation and text.

Arrow
Arrow
ArrowArrow
Slider

HTML + CSS coding
This section will be interesting for those who have work experience with text on a more advanced level - using html, css-coding. Here we will offer our additional opportunities for stylistic design.

WIDGET > Photo Report

It allows you to effectively insert a block with images and a short announcement from another source (as from our web-portal or any external source). It makes sense for a sufficiently large number of images in the source material. The recommended number of thumbnail images from the source in this block is not more than 4 pcs. Optimum 2-4 pcs.

Syntax: sample code for insertion with preconfigured classes:

Result: pls check the widget works on both: desktop and mobile versions of any device:

Photo Gallery One lovely sunset on Hawaii One lovely sunset on Hawaii One lovely sunset on Hawaii One lovely sunset on Hawaii Have you ever been at paradise? No, then look and enjoy! The breathtaking, natural beauty, warm tranquil waters, lush rainforests, and lava flows to beautiful white sand beaches... View photos

Note: In this example, as we can see, the used number of images from the source =3 pcs. (33% of the total width) using a class .gantry-width-33 respectively for 2 images, use .gantry-width-50 and for 4 img please use .gantry-width-25. All that is necessary is to determine the images from the source and insert them into the code, the preview of the images will be made by the widget itself so it is very convenient.

All this functional [ we are expanding it ] we originally developed "for ourselves" but.. we will gladly provide it to interesting authors. Quality content is an asset - all win!

Interesting? Let's start!

Registration on our portal will additionally allow you to put your own news in blog, communicate on forum, to add a new objects in base and not only...

If you have any question(s) please contact us
or type it here by your social account below:

Social Comments
Florida, FL [ community ] real estate