How to Customize Cucumber reports with Boostrap css? - cucumber

I have tried to customize cucumber reports but I am not getting a clear picture of where to change the CSS according to our needs. Any help will be appreciated.

You can put the custom CSS anywhere (best to keep in /support along with your formatter.rb), and then build the HTML page using cucumber's HTML builder referencing your CSS or you could have a pre-built HTML template and use it with the builder. Have a look at https://github.com/raldred/cucumber_textmate/ to get a general idea.

Related

How to share html report of pytest-html with out changing the css

I am using python 3.6 and pytest-html to generate HTML reports .
Everything is successfully working but when i share my html report to my manager the css of the entire document is out of placed .can someone tell the reason to why it is happening and the solution for it .
The view of reports when i run:
The view of the reports when i share the document with my manager
include --self-contained-html when you are calling your pytest...such as
pytest your.pyfilename --html=pathandfilename --self-contained-html.
Your result file have inline css in it.
html=report.html --self-contained-html
It seems like you are not sharing whole bunch of items like CSS with html file you are giving. Just place the CSS code inside your HTML rather than giving the path and it will solve your problem.

Application Layout control and font-awesome

I am using the application layout control from the extension library. In my application banner links I would like to include icons from font-awesome but I do not manage to achieve this.
Someone to the rescue?
Balassaitis says everything I was going say only better and with pictures: https://xcellerant.net/2014/04/07/implementing-font-awesome-4-0-3-in-xpages/
NOTE: the FA classes don't work with the img tag. Use the i tag in your source instead.

visual composer vc_shortcodes-custom-css

We have found that visual composer is creating custom css class and css code is placed in:
<head>...</head>
We have shortcodes which generate some css code. we also want to make a custom css class and add the css code with the custom css class name.
We just want to make like this.
http://prntscr.com/ckw1pb
I can't find any develop documentation about it. can you please give us little details?
It's pretty easy to figure it out, just use
print_r($this)
on the vc_row.php template file of Visual Composer and it will reveal you everything.
The simplest way is to add this to your vc_row.php file:
// Add this to your vc_row.php for separate custom css output
// Custom CSS
if(is_single() or is_archive() or is_404()) {
if($css) {
echo "<style>$css</style>";
}
}

Conflicts between Custom theme CSS and Liferay CSS

I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}

Orchard Projection Isotope

I'm trying create an affiliate directory on my Orchard site. The directory is populated by running a query on my custom Content Type. The directory needs to be sortable and searchable. I've set up a basic jsfiddle here that is a basic functioning version of what I'm attempting to do, but it's just in html: http://orchard1.pha.jhu.edu/affiliates-beta-2
Or you can view the jsfiddle here: http://jsfiddle.net/tgelles/AMZf8/
Has anyone discovered a way to best use isotope on an Orchard Projection? I've downloaded the Projection Layout module, but I have no idea how to use that/where to inject the specific isotope code. I've also created alternate template files for the Projection's Summary display, but I don't know how to best inject the isotope plugin into that razor file.
Any help would be appreciated.
The best way would be creating a shape, but You could easily edit the query template and inject the js through a custom view for that projection(url,type, etc)
Check in your Queries.
There was a video which helped me understand better how they work: http://www.youtube.com/watch?v=Ka55wTTXZg8
Hope it helps.

Resources