Making Style Edits to the Tquist WordPress Newsfeed Plugin

In order to make basic changes to the TQuist news feed plugin you will need to access your CSS file. This is generally located under the “appearances” and then “editor” menu. (see figure below).  How an editor manages CSS will vary depending on WordPress theme and best practices.  The TQuist website at the time of documentation used the Agency theme and the Genesis framework.  In this case we have chosen to use the themes Additional CSS function available through Appearance ==> Customize menu.

We will use the .tq-widget class to first get a hold of the entire widget from there we can drill down to the element we wish to edit the appearance of. Here are some of the most common common changes that people might want to make. The highlighted text represents values you may wish to edit. For more information on CSS, here is a link to a more in depth tutorial that will help you make more advanced edits.

1. Change style of the newsfeed link. Here we grab the link .tq-widget and then the link (the a tag). That allows us access to the color, size, and spacing of the newsfeed article links. If you want to change the color of the text use the color attribute, if you wish to change the font size use the font size editor. In all cases, just add the attribute you wish to change to your CSS file. (ie. if you only want to change color only add the “color” attribue to .tq-widget a {}

.tq-widget a {

color: #ded435;

font-size: 1.3em;

}

2. Change the style of the link on hover. This allows you access to the link when someone hovers their mouse over it.

.tq-widget a:hover  {

color: red;

font-size: 24px;

}

3.      Change the dotted border/divider or the space between each item.

.tq-widget ul li {

border-top: none;

border-bottom: 1px solid black;

margin-bottom: 1em;

}

4.       To change the header text

.tq-widget h1 {

font-size: 2.4em

color: #222;

}

4.      Change the header/title.

.tq-widget h1 {

font-size: 2.4em;

color: blue;

Margin-bottom: 0;

}