Avatars not showing on phpbb forum - css

I have a PHPBB forum and my avatars aren't being displayed. When I inspect the element the img element is greyed out.
I can't work out what the problem is, I have tried to edit the css to display: block but this doesn't resolve anything. In the settings avatars are also enabled so that isn't the problem.

As you can see the image when you hover over the source, I'm confident that you don't have a image directory error.
Have you edited many css files?
Have you put some display: none; lines in any of them?
If yes, go over each line (use search function in your IDE) and comment them out, see if it resolves your issue.
Report back with your result.

Related

Need help for the category posts layout in wordpress

On my wordpress website, I am using NewsCard theme referring this youtube tutorial.
I have added categories to Menu but I am running into a strange problem.
As visible in the below image, I am getting huge gutters between the news cards which is ugly and resulting into the cards layout as very long vertical post cards.
Can someone help me resolving this? I am not able to figure out what I am doing wrong here. I was using generatepress theme earlier.
The more natural layout should be:
Thanks in advance.
In the file https://examtipsindia.com/wp-content/plugins/gp-premium/blog/functions/css/style.min.css?ver=1.12.2 this rule is adding the issue
.generate-columns.grid-50, .grid-sizer.grid-50 {
width: 50%;
}
I can't see without accessing your admin the best way to add a custom CSS rule to fix the one above, but as I don't see a child theme or plugin, go to Appearance > Cutomize > Additional CSS, add the CSS below and "Publish" to save the changes:
body.archive.category #main .generate-columns.grid-50{
width:auto;
}
That should do it, but if it doesn't let me know.

WordPress Theme-Editor - Update File button is unclickable

Suddenly a strange issue appeared in the WordPress Theme-Editor page. The Update File button at the bottom changes its position up and down when I try to click it! The issue is present no matter what theme is active.
I have inspected the button and found that when I disable this css it will work fine (load-styles.php):
.wp-core-ui p .button {vertical-align: baseline;}
Any idea why is this happening and how to fix it?
Thanks
A plugin is almost certainly adding some CSS to the selector .button or .spinner (the only other element with the same vertical-align parent). Disable all of your plugins and reactivate them one by one until you find the culprit. I was able to recreate the issue by adding height: 100px; to .spinner.
If that doesn't work, try reinstalling WordPress and making sure you have the most recent version.
#Xhynk is right, there should be plugin conflicting with wordpress script or you have old version of WordPress, but make sure to take a backup to update WordPress.

Slideshow plugin not displaying images in Chrome

I'm new at Drupal and I'm now administrating an existing site. There's a bug that the home slider asigns a size of 0x0 to its images, so only the pager is displayed.
When you open the website in another browser, it works fine.
What could be the problem? I googled it but non of the solutions I found work.
Thanks,
Brian
First, it's not Drupal related issue, but it's CSS related, so you tagged it wrong and probably googled about it wrong.
Problem can be in:
a) your theme (called "Porto")
b) slideshow module if you are using one
In any case you should (temporary) disable caching of CSS on page (admin menu) Configuration -> Development -> Performace
URL:
/admin/config/development/performance
Then find out what CSS causes this issue, find out what file you should change (user Firebug or some similar tool), change the CSS file, turn on CSS cache again, clear the cache (just in case).
So, Darko's solution can be correct, but definitely there is no point of changing cached CSS file since it will be re-generated in time and you'll loose your change, but it should be applied on correct file. Instead, as I said, disable cache, find the real CSS file, change it there and clear the cache.
Or, since you have access to all CSS files you don't even have to disable the cache, but just find and fix CSS in real file and clear the cache.
Let's say it is CSS related problem but it is not quite correct answer here.
You can see in different browsers different render outputs based on module settings. Issue is on this setting:
element.style {
height: 460px;
position: relative;
width: 930px;
}
element.style values are the values you set up in your module (in this case view_slideshow). In Firefox you get good output (code from above) but in google chrome you got just next code:
element.style {
position: relative;
}
It is a bug for sure and it is a module related because for some reason Google Chrome not read values which are set in module. First you should try to update your slideshow module on latest release. If you still have a problem you can easily fix it via changing CSS file.
#MilanG have a good point because once you clear the cache new CSS will be generated and you will have the same problem. I will try to explain what you should with little more details.
Go on admin/config/development/performance (if you are using drupal 7) and check out option Aggregate and compress CSS files. That will disable caching of CSS.
Open Firebug on your front page and find next line:
<div id="views_slideshow_cycle_teaser_section_carrusel_home- block"class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative;">
If you use Firebug on Firefox you should find same line (but it is outputted different as you can see):
<div id="views_slideshow_cycle_teaser_section_carrusel_home-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 930px; height: 460px;">
Now you find which CSS is used on that line (it should be something like sites/all/themes/your_theme_name/css/views.css )
Find the right line in that CSS and change it like i showed you in my first post.
Clear the cache and now you go back on admin/config/development/performance and turn on caching.
Hope this helps.
You can fix this like this:
Go on sites/default/files/css
Open css_Ad8ea4Il0r-gy2oHf2eZpgamt3p0W3GurWCoZa6MhXU.css
Find this code in CSS:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;}
Replace it with this code:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;height:460px;width:930px;}
Save CSS

Replace CSS Link or Hide under with Image?

The problem is on my site:
http://windowsphonedaily.blogspot.com/
I've been wracking my brain trying to figure how to solve this. Basically, I wanted to create a "Featured Posts" slider by using EasySlider 1.7 . The slider is the first thing you see when on the site.
Everything seemed to be going well during the install, but once I finished I realized the nextText and prevText was showing on top of my background images. This seems to be a property that can't be modified with css or html as I think it's embedded in the javascript provided.
I tried the Best Answer found in this question ("CSS text replace with image, need hyperlink") and it worked for the nextBtn but when I tried it for the prevBtn the nextBtn disappeared and was replaced by the default setting. If anyone can explain to me how to properly use this method with both buttons, then that solution would be fine.
But if you can't then please help me come up with any other solution. I'm not very well versed with CSS or HTML, so I'm learning as I go right now. It's probably some dumb mistake I made, but I'd still like to know how to fix it!
Thank you in advance to anyone who responds!!
I tested it with firebug directly on Your page. Try this:
#nextBtn a, #prevBtn a {
display: block !important;
text-indent: -9999px;
}
Important is this !important ;) It makes that this display: block is more important than display: inline which adds Your slider plugin.
Not quite sure what's going on, but if you go to https://sites.google.com/site/shawnhasinger/files/easySlider1.7.js where you have linked it from, you get a log in page, meaning that it doesn't work! This isn't the issue you are facing, probably because you are logged in...

Fix a CSS problem with a Wordpress theme and a syntax highlighting plugin

I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.

Resources