Hello,
Use OceanWP >>Tags Cloud widget instead of default wordpress Tags widget. Customize style design as per your need using this tag widget.
Thread Starter
Jorge
(@jomore)
Hello,
Thank you for your response.
I’ve been only using OceanWP tag cloud widget, and I’ve been trying to configure it to look the way I want with no luck. There are only buttons with text inside, and the options to edit them are just: color, padding, taxonomy, size, border, height, spacing and text transform.
I also tried costumize CSS but I have little experience about that. Nevertheless I even could make some nice changes.
However, earlier today, I tried WordPress tag cloud, that has exactly the same buttons with text, with no differences whatsoever. And there are no custom CSS.
It is possible to be the changes implemented by the demo theme?
Thread Starter
Jorge
(@jomore)
Update: After testing, reseting, uninstalling, etc. I’ve been able to find what is causing that kind of formatting: Ocean Extra. However that plugin is needed…
What can be done in alternative?
Try to add the below code to the CUstomize > Custom CSS section and check it works or not. It is from the twenty seventeen themes. Customize the CSS as per your need.
.tagcloud, .widget_tag_cloud, .wp_widget_tag_cloud {
line-height: 1.5;
}
.widget ul {
list-style: none;
margin: 0;
}
.tagcloud ul li {
float: left;
border-top: 0;
border-bottom: 0;
padding: 0;
margin: 4px 4px 0 0;
}
.widget .tagcloud a, .widget.widget_tag_cloud a, .wp_widget_tag_cloud a {
border: 1px solid #ddd;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
padding: 4px 10px 5px;
position: relative;
-webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out;
width: auto;
word-wrap: break-word;
z-index: 0;
}
a {
color: #222;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
Thread Starter
Jorge
(@jomore)
Pasting the code as is, it stretches each tag cloud button to the entire width of the side bar, but the format still remains the same though. (tested online).
After that, I disabled Ocean Extra plugin and add WordPress tag cloud; those nasty buttons still remains but the size is different depending on the use of the tag. However, after I disabled my custom CSS the cloud is back to the default formatting (more or less like I wanted).
which means I just need to disable Ocean Extra Plugin, or find another way around.
Try to add the below code to the functions.php file of the child theme and check it works or not.
add_filter( 'widget_tag_cloud_args', 'custom_widget_tag_cloud_args' );
function custom_widget_tag_cloud_args( $args ) {
$args['largest'] = 160;
$args['smallest'] = 80;
$args['unit'] = '%';
return $args;
}
Thread Starter
Jorge
(@jomore)
It didn’t work. I did that but it remains stuck on the same style.
The only possible changes are made in CSS. I can edit anything, but every button remains the same size.
It’s like something is disabling all the changes.
Since it’s a plugin that is preventing to change anything, it isn’t possible to do something about it? Like editing something or do something similar like a child theme?
I’m trying something on my own, lets see if I have luck.
Edit: Forgot to add. I’ve already tried to disable some scripts on that plugin (Ocean Extra) just in case… But no luck.
-
This reply was modified 7 years, 4 months ago by
Jorge.
Thread Starter
Jorge
(@jomore)
In addiction:
The code you just gave me, to put to the functions.php file of the child theme, works well with the Ocean Extra plugin disabled (if I do some editing like reducing/increasing the size numbers).
Presently, I’m trying to edit the plugin CSS file corresponding to the tags. Trying to figure if it will work or not, just doing some basic changes (did a backup).
Thread Starter
Jorge
(@jomore)
Update: After doing some editing to the plugin files, I’ve found the correct file to edit. Ocean Extra is active, the OceanWP tag cloud widget is working and the way I want.
I just need to do some custom CSS and that’s all.
I took out all the code related to the tagcloud and deleted it. The code was found at widgets.css – Ocean Extra > assets > CSS.
Now I have to edit the file every time it is updated.
I wanted a more correct approach without editing the original content, but this solved the case.
It’s a bit complicated because, with a plugin update, all custom codes will be removed.
