Page layout messing up when introducing new CSS over Bootstrap templates - css

So having a real issue. I'm trying to input a responsive newsletter form into my website, the site is using a bootstrap template.
I can successfully put the form in and in the right place but it completely messes up the rest of the layout on the site.
Is there anything specific I should be taking / removing / inserting into my CSS or index file.
Any help much appreciated. Thanks

Related

Grails Twitter Bootstrap Plugin Pagination Display is Messed Up

I am using Twitter BootStrap Plugin compile 3.3.5 with Grails 2.3.11 and I've added the pagination fix in Config.groovy. When I go to display a list of records (Index action) the pagination seems to be messed up. It displays a vertical block of page numbers instead of the sleek pagination of default Grails 2.3.11. I have the pagination with bootstrap below:
This doesn't seem to be what it looks like. I figured it would display horizontally and not take up so much space on the page like it is now. Normal pagination shown for reference:
Can anyone confirm that what I have attached is default behaviour of the plugin? In any case, how can I fix this issue?
Line in Config.groovy
grails.plugins.twitterbootstrap.fixtaglib = true
For anyone interested:
Some more researching has me understanding that I have to override the twitter bootstrap plugin pagination code. I don't want to do that. So I ended up with a workaround of manually installing bootstrap into my application (added relevant css and js links in my gsp files). I am still interested to know if what was asked in the OP is possible, however I am now able to take advantage of the bootstrap v4 styles which is a plus to me.

Liferay 6.1 force any "edit control" to appear in a popup

I'm having issues with the default css and the custom css written by some other company. I'm trying to merge those two but the one affects the other I managed to fix most of the issues but it is really bad written css and very generic.
In order to limit my issues I was thinking to force any type of web-content diplay and porlet edit controls to open into a popup.
Is this possible? google didn't help.
I'm not sure if I'm understunding your problem, but if the CSS is the cause, I suggest you to fix it instead to look forma a trick.
In order to load web content as dialog, you can create CSS for this purpose on a theme or on each content template.

Styling AngularJS ui-router navigation tabs

I am rewriting an app using AngularJS. The tabs have a certain styling that I don't want to change. But upon using ui-router, specifically replacing "href" with "ui-sref", the look of navigation tabs gets messed up because I think the JavaScript and CSS is defined for "href".
I tried replacing all instances of href with ui-sref but that didn't work.
I've looked into Bootstrap but I need to render new pages upon clicking the tabs, not display data already on the page but hidden. Like Bootstrap does.
Can someone please suggest me what to do? How to modify the current styling or maybe suggest some other css template that I can use only for the navigation tabs? Thanks in advance!

Styling/customizing a twitter widget?

Twitter seems to have removed most of the ability to styling the widgets. But thing is I keep seeing websites with custom widgets. Is there any way to still do it? I saw a tutorial on taking the JS and the CSS and placing it on your own server. It doesn't seem to work that way anymore, though. Does anyone have a clue on how to do this? I need my widget to fit the theme of my website perfectly.
I'm talking about like removing the widget header, hide pictures from the feed, etc.
This JS snippet will let you add custom CSS styles to the Twitter embed widget: https://github.com/kevinburke/customize-twitter-1.1

Gravity forms css infering layout

I'm migrating the contact form from here: http://www.niclaims.co.uk/ to the new Wordpress version using Gravity Forms (the original ASP site).
However, I am unfamiliar with the way it controls the CSS of the form output. I have turned it off in the options, but the widget seems to add extra padding on the one I am making here: http://niclaims.webdeveloperbelfast.com/ . It's the contact form on the home page side bar I need help with. How can I remove this extra padding?
Also, I need to know, with Gravity Forms is there a way that I can have the labels inline in the text boxes and disappear on focus?
i am not a css prodigy and have never used gravity forms before. But you can try this plugin http://wordpress.org/extend/plugins/dropifi-contact-widget/ which offers a much easier way to create contact forms without touching any code. Hope it helps!

Resources