How to remove the little bird icon in Concrete5 Tweetcrete - css

Recently someone has asked me to solve a little problem on a website of theirs, but I can't really figure out where it comes from. The site uses Concrete5 with Tweetcrete installed, and I use a tweetcrete block to display tweets, both on the homepage and on a dedicated social media page. In all the blocks though, the tweets are displayed with a little bird icon attached, which doesn't work well when the window is resized - it obscures the text. I cannot find where that icon coms from though, there doesn't seem to be anything in that block that causes it. There is nothing special about the code either, no styles.
To see the the problem, visit the homepage.
It'll be on the right hand side, towards the bottom.

You can override it via CSS like so:
.ccm-tweetcrete-timeline ul li {
background-image:none;
}

Related

permanent change via inspect element, ways to make browsers remember my appearance preference?

Have you seen the smiley jobs guy at the right of the LinkedIn website?
I want him go away!
(https://static-exp1.licdn.com/scds/common/u/images/promo/ads/li_evergreen_jobs_ad_300x250_v1.jpg)
so, I open inspect element on it, add display: none; to its CSS, and there, he's gone...
But when I change pages or refresh it, he comes back, he is very persistent in finding a job for me.
Now, how can I make my browser to remember my appearance preference??
The same goes for the advertisement banners as well,
How can you teach your browser to not show elements again when you made them disappear by inspect element?
Have you seen the smiley jobs guy at the right of the LinkedIn website?
I haven't.
How can you teach your browser to not show buggers again when you made them disappear by inspect element?
Use tampermonkey if you are using chrome or similar software to automate the process of setting display: none on a DOM element. Or more conveniently use some ad-blockers available online.

Strange Bug with Mobile Side Menu and Joomla! template

I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.

Why my page is too wide when using RTL?

This is a WordPress issue and I'm asking this question here because I believe it is a CSS problem.
I'm using Wordpress and a theme named ShootinStar but I have to do my website in an RTL language. The theme supports RTL though.
Everything is perfect when the language of WordPress is English but once I change it to Farsi, then the width of my theme increases by maybe 4 times.
The website is visible and clear but you can actually swipe to left and see the rest of the background in a wide area.
Pages are fine, no problems with that. But the 'Post page' where I do my blogging which is my main page, is facing this issue. I tried assigning it to a page, but then that page will have the same problem.
I tried disabling plug-ins and changing themes, but nothing happened. I'm guessing that it is a CSS problem, but where is it exactly? I attached screenshots and highlighted the parts with red arrows.
This is after using element inspector:
What shall I do?!
You can add this CSS code to remove the unwanted space in the x-axis direction.
#container {
overflow-x: hidden;
}

using responsive wordpress theme but content is cut off on left side in mobile versions

I made a wordpress site using the responsive theme "hueman".
For the integration of the content I used the plugin "pixgridder" (don`t know if that is relevant)
For testing the site an all devices I use this tool: quirktools.com/screenfly
My site is: http://www.traumbad-muenchen.de
When testing the site http://traumbad-muenchen.de/portfolio/ in the mentioned tool above I can see that for apple I phone 5 the content is cut off on the left side while the page titel is displayed correctly.
I tried to find out the problem with firebug and so on but can`t find a way to make the content appeare like the page titel does that means not do be cut off.
I tried to play around with different settings redarding padding and margin but whenever I do this the content is mooved to the middle also on the desktop versions so that these versions look stupid.
What I want to achieve is that the edge of the content always starts exactly where the edge of the page titel does. I don`t have any problem displaying the page title.
Would be so thankful if anybody could help me.
Thanks a lot in advance
The problem occurs because there is no padding.
You can overcome this problem by adding a padding-left in your responsive.css on line 171.
Change:
.entry { font-size: 15px; }
to
.entry { font-size: 15px; padding-left:10px;}
In my case, I had to add padding to the span settings. One easy solution would be to load the website on a 'website responsive testing' site and then try to solve your issue by using the 'inspect element' on your browser.

drupal - problem with quicktabs

Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks

Resources